@charset "utf-8";

:root {
--color-label-primary:     rgba(0  ,   0,   0, 0.73);
--color-border:            rgba(0  ,   0,   0, 0.14);
--color-ground-primary:    rgba(240, 240, 240, 1.00);
--color-ground-secondary:  rgba(231, 231, 231, 1.00);
--color-ground-textfield:  rgba(247, 247, 247, 1.00);
--color-ground-button:     rgba(247, 247, 247, 1.00);
--color-attention:         rgba(200,  70,  60, 1.00);
--color-attention-tint:    rgba(200,  70,  60, 0.15);


}

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
font-weight: normal;
line-height: 1;
color: var(--color-label-primary);
}

hr {
border-top: 1px solid var(--color-border);
}

input[type="text"],
input[type="number"] {
height: 24px;
padding: 3px;
background-color: var(--color-ground-textfield);
border: 1px solid var(--color-border);
border-radius: 2px;
font-size: 13px;
}
input[type="text"].over,
input[type="number"].over {
color: var(--color-attention);
background-color: var(--color-attention-tint);
}

input[type="number"] {
width: 56px;
text-align: right;
-moz-appearance: textfield; /* Firefox用 */
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
-webkit-appearance: none;
margin: 0; 
}

input[type="range"] {
width: 113px;
}

input[type="color"] {
padding: 0;
border: 1px solid var(--color-border);
border-radius: 2px;
background: none;
}
input[type="color"].over {
opacity: .1;
}

button {
padding: 4px 16px;
background: var(--color-ground-button);
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 13px;
cursor: pointer;
}

button:hover {
background: #e7e7e7;
}

/* ————————————————————————————————————————————————————————— */

.horizontal {
display: flex;
gap: 16px;
}

/* ————————————————————————————————————————————————————————— */

body {
background-color: var(--color-ground-primary);
}

.wrap {
display: flex;
flex-direction: row-reverse;
height: 100vh;
}


/* ————————————————————————————————————————————————————————— */

.inspector {
width: 432px;
height: 100vh;
padding: 16px;
background: var(--color-ground-secondary);
font-family: -apple-system, BlinkMacSystemFont;
display: flex;
flex-direction: column;
gap: 24px;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
#inspector::-webkit-scrollbar {
display: none;
}

.inspector > h1 {
font-size: 16px;
}

.canvas {
flex: 1 0 0;
height: 100vh;
padding: 24px;
display: flex;
flex-direction: row;
gap: 24px;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
#canvas::-webkit-scrollbar {
display: none;
}

/* ————————————————————————————————————————————————————————— */

.inspector_type {
display: flex;
flex-direction: column;
gap: 24px;
}

.inspector_type > h1 {
font-size: 14px;
}

.inspector_type > button[type="button"] {
}

/* ————————————————————————————————————————————————————————— */

.input_type {
width: 192px;
display: flex;
flex-direction: column;
gap: 8px;
}

.input_type > h1 {
font-size: 12px;
}

/* ————————————————————————————————————————————————————————— */

.input_controlItem {
display: flex;
align-items: center;
gap: 6px;
}

.input_controlItem > h1 {
width: 8px;
font-size: 14px;
}

.input_controlItem > input[type="text"] {
flex: 1 0 0;
}

.input_controlItem > input[type="range"] {
flex: 1 0 0;
}

/* ————————————————————————————————————————————————————————— */


#palette_oklch {
/* width:  jsで指定; */
/* height: jsで指定; */
}


#palette_hst {
width: calc(473px / 2);
height: calc(2448px / 2);
}



#palette_hst_svg {
width: 473px;
height: 2472px;
}

#palette_hst_svg svg{
margin-bottom: 24px;
}




#debug {
width: 200px;
}

#debug p {
font-family: roboto mono;
font-size: 13px;
line-height: 1.5;
}