*{
    font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  transition: all .1s;

}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}
#elements-tab{
  border-radius:100px 32px 32px 100px;margin-right:2px;margin-bottom:10px;
  height:40px;
  overflow:hidden;
  
}
#css-tab{
  border-radius:32px 100px 100px 32px;argin-left:2px;margin-bottom:10px;
  height:40px;
  overflow:hidden;
}

main {
    display: flex;
    flex: 1;
}

#left-panel {
    flex: 1;
    padding: 10px;
    border-right: 1px solid #ccc;
}

#preview-frame {
    width: 100%;
    height: 100%;
    border: none;
}

#right-panel {
    width: 300px;
    flex-direction: column;
    padding: 10px;
  overflow:scroll;
}

#tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
  height:70px;
  padding-bottom:5px;
  margin-bottom:5px;
  overflow:hidden;
}

#tabs button {
    flex: 1;
    padding: 10px;
    border: none;
    background:var(--primary-container);
  color:var(--on-primary-container);
    cursor: pointer;
  height:40px;
}

#tabs button.active {
    background: var(--primary);
  color:var(--on-primary);
}

.section {
    display: none;
}

.section.active {
    display: block;
}

#element-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 10px;
  gap:8px;
}

#element-grid button {
    cursor: pointer;
}

#added-elements-list {
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.item {
    display: flex;
    justify-content: space-between;
  border:none;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
  padding-top:5px;
}

.item button {
    margin-left: 2px;
  font-size:12px;
  padding:5px 2.5px;
  
}

.preview-highlight {
    outline: 2px dashed blue;
}

.accordion {
    cursor: pointer;
    padding: 10px;
    margin-top: 5px;
  border-radius:100px;
  background:var(--primary-container);
  color:var(--on-primary-container);
}

.accordion.active {
  background:var(--primary);
  color:var(--on-primary);
  border-radius:20px 20px 4px 4px;
  margin-bottom:2px;
}

.panel {
    display: block;
    background-color: var(--secondary-container);
    padding: 0px 10px;
  height:0px;
  border-radius:4px 4px 20px 20px;
  transition:all 0.3s ease;
  overflow:hidden;
}

.panel.show {
    display: block;
  padding: 10px;
  height:fit-content;
}

input,textarea{
  border:1px solid #555;
  border-radius:8px;
  padding:6px;
  margin:1px;
}
p{
  font-size:12px;
}
button {
    margin-bottom: 10px;
}
@media (prefers-color-scheme: dark) {}