/*\

reset

\*/

body {
	margin:0;
}
textarea {
	font:inherit;
	border:none;
	margin:0;
}
input[type='text'] {
	font:inherit;
	border:none;
}

/*\

style

\*/

html {
	font-size:62.5%;
}
@media all {
	body {
		font-size:1.2rem;
		font-family:sans-serif;
	}
}
@media (min-width:400px) {
	body {
		font-size:1.4rem;
	}
}
@media (min-width:600px) {
	body {
		font-size:1.6rem;
	}
}

/*\

layout

\*/

body {
	width:calc(100% - 400px);
}
body > main {
	height:100%;
	overflow:auto;
	margin:auto;
}
body > aside {
	position:fixed;
	right:0;
	top:0;
	width:400px;
	height:100%;
	overflow:auto;
}

/*\

toolbox

\*/

aside {
	display:flex;
	justify-content:space-between;
	align-items:start;
}
aside input[type='radio'][name='toolbox_tab'] + label {
	flex:1 1 auto;
	line-height:40px;
	text-align:center;
	cursor:pointer;
}
aside input[type='radio'][name='toolbox_tab']:checked + label {
	background:rgb(240,240,240);
}
aside input[type='radio'][name='toolbox_tab']:checked + label + div[id] {
	position:absolute;
	top:40px;
	right:0;
	bottom:0;
	left:0;
}
aside input[type='radio'][name='toolbox_tab']:not(:checked) + label + div[id] {
	display:none;
}

/*\

style

\*/

aside {
	color:rgb(50,50,50);
	background:rgb(250,250,250);
}
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
	margin:0;
	padding:0.5em;
	background:rgb(240,240,240);
}
aside a,
aside a:hover,
aside a:focus {
	text-decoration:none;
}
aside input,
aside select,
aside button,
aside .button {
	margin:0.5rem 0;
}
aside a[download],
aside button,
aside .button {
	display:inline-block;
	font:inherit;
	line-height:1.5em;
	box-sizing:border-box;
	padding:0 1em;
	border-style:solid;
	border-width:1px;
	border-color:rgb(127,127,127);
	border-radius:0.25em;
	color:inherit;
	background:transparent;
	cursor:pointer;
	-moz-user-select:none;
	-webkit-user-select:none;
}
aside input[type='text'] {
	line-height:1.5em;
	box-sizing:border-box;
}
aside input[type='radio'] {
	display:none;
}
aside input[type='radio']:checked + label.button {
	background:rgb(240,240,240);
}
aside input[type='range'] {
	vertical-align:middle;
}
aside input[type='file'] {
	position:absolute;
	width:0;
	opacity:0;
	z-index:-1;
}
aside div[title] {
	display:table-row;
}
aside div[title]::before {
	content:attr(title);
	display:table-cell;
	padding:0 0.5em;
}
aside div[title] input {
	display:table-cell;
}

/*\

main

\*/

/*\

code widget


.code-widget {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
\*/

.code-widget {
	display:inline-block;
}
/*\

grid-widget

\*/

.grid-widget {
	width:calc(210mm + 1em + 1rem);
	height:calc(297mm + 1em + 1rem);
	margin:0 calc(1em + 1rem) calc(1em + 1rem) 0;
}
.grid-widget-row {
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-color:rgb(255,255,255);
}
.grid-widget-column {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(255,255,255);
}
.grid-widget-row input {
	width:8rem;
	text-align:center;
	transform-origin:center center;
	transform:rotate(-90deg);
	cursor: vertical-text;
}
.grid-widget-column input {
	width:8rem;
	text-align:center;
}
.grid-widget-row div {
	position:absolute;
	right:0;
	bottom:-0.5rem;
	width:2rem;
	height:2rem;
	transform:translateX(0) translateY(50%);
	z-index:2;
	text-align:center;
	line-height:2rem;
	background-color:rgb(250,250,250);
	cursor:ns-resize;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.grid-widget-row div::after {
	content:'';
	position:absolute;
	top:0;
	left:100%;
	border-width:1rem 0 1rem 0.5rem;
	border-style:solid;
	border-color:transparent transparent transparent rgb(250,250,250);
}
.grid-widget-column div {
	position:absolute;
	right:-0.5rem;
	bottom:0;
	width:2rem;
	height:2rem;
	transform:translateX(50%) translateY(0);
	z-index:2;
	text-align:center;
	line-height:2rem;
	background-color:rgb(250,250,250);
	cursor:ew-resize;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.grid-widget-column div::after {
	content:'';
	position:absolute;
	top:100%;
	left:0;
	border-width:0.5rem 1rem 0 1rem;
	border-style:solid;
	border-color:rgb(250,250,250) transparent transparent transparent;
}
.grid-widget-area input {
	width:8rem;
	text-align:center;
}
.grid-widget-area {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:grid;
	grid-template-columns:1em auto 1em;
	grid-template-rows:1em auto 1em;
	opacity:0.9;
}
.grid-widget-area div.top {
	grid-column:1/4;
	grid-row:1;
}
.grid-widget-area div.right {
	grid-column:3;
	grid-row:1/4;
}
.grid-widget-area div.bottom {
	grid-column:1/4;
	grid-row:3;
}
.grid-widget-area div.left {
	grid-column:1;
	grid-row:1/4;
}
.grid-widget-area div.top.left {
	grid-column:1;
	grid-row:1;
}
.grid-widget-area div.top.right {
	grid-column:3;
	grid-row:1;
}
.grid-widget-area div.right.bottom {
	grid-column:3;
	grid-row:3;
}
.grid-widget-area div.bottom.left {
	grid-column:1;
	grid-row:3;
}
.grid-widget-area div.main {
	grid-column:2;
	grid-row:2;
	display:flex;
	justify-content:center;
	align-items:center;
}
.grid-widget-area div.top.left,
.grid-widget-area div.right.bottom {
	cursor:nwse-resize;
}
.grid-widget-area div.top,
.grid-widget-area div.bottom {
	cursor:ns-resize;
}
.grid-widget-area div.top.right,
.grid-widget-area div.bottom.left {
	cursor:nesw-resize;
}
.grid-widget-area div.right,
.grid-widget-area div.left {
	cursor:ew-resize;
}
.grid-widget-area div.main {
	cursor:move;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.grid-widget-area {
	background-color:rgb(240,240,240);
}
.grid-widget-area div.top:hover,
.grid-widget-area div.right:hover,
.grid-widget-area div.bottom:hover,
.grid-widget-area div.left:hover {
	background-color:rgb(250,250,250);
}

/*\

widget

\*/

.widget {
	display:grid;
	grid-template-columns:1em auto 1em;
	grid-template-rows:1em auto 1em;
	padding:0;
}
.widget div.top {
	grid-column:1/4;
	grid-row:1;
}
.widget div.right {
	grid-column:3;
	grid-row:1/4;
}
.widget div.bottom {
	grid-column:1/4;
	grid-row:3;
}
.widget div.left {
	grid-column:1;
	grid-row:1/4;
}
.widget div.top.left {
	grid-column:1;
	grid-row:1;
}
.widget div.top.right {
	grid-column:3;
	grid-row:1;
}
.widget div.right.bottom {
	grid-column:3;
	grid-row:3;
}
.widget div.bottom.left {
	grid-column:1;
	grid-row:3;
}
.widget div.main {
	grid-column:2;
	grid-row:2;
}
.widget div.top.left,
.widget div.right.bottom {
	cursor:nwse-resize;
}
.widget div.top,
.widget div.bottom {
	cursor:ns-resize;
}
.widget div.top.right,
.widget div.bottom.left {
	cursor:nesw-resize;
}
.widget div.right,
.widget div.left {
	cursor:ew-resize;
}
.widget div.main {
	cursor:move;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.widget div:hover {
	/* background-color:rgb(250,250,250); */
}

/*\

editable text

\*/

.panel textarea {
	width:100%;
	height:100%;
	resize:none;
}
.panel textarea:not(:focus) {
	background-color:rgb(240,240,240);
}
.panel textarea:focus ~ .narration,
.panel textarea:focus ~ .speech {
	display:none;
}

/*\

canvas

\*/

img {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	
	width:100%;
}
canvas {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
/*
.canvas-widget {
	justify-self:start;
	align-self:start;
}
canvas:active {
	cursor:crosshair;
}
*/
.panel {
	background-color:rgb(240,240,240);
}
canvas {
	/* background-color:rgb(240,240,240); */
}
/*
.widget div.move {
	position:absolute;
	bottom:100%;
	left:1em;
	width:2em;
	height:0;
}
.widget:focus-within div.move {
	height:1.5em;
	border-radius:0.5em 0.5em 0 0;
}
div.panel:focus-within {
	cursor:crosshair;
}
[contenteditable] {
	cursor:initial;
}
[contenteditable]:empty {
	display:initial !important;
}
*/