:root{
  --ink:#2f252c;
  --muted:#8b7480;
  --rose:#9d667f;
  --line:#c8b6bd;
  --dot:#d8c7ce;
  font-family:"Yu Kyokasho","Kaiti TC",KaiTi,serif;
  color:var(--ink);
  background:#fff8fb url("/assets/library/soft-pink/04_patterns/pattern_tile_04_02.svg") repeat;
  background-size:208px 159px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100dvh;
  color:var(--ink);
  background:#fff8fb url("/assets/library/soft-pink/04_patterns/pattern_tile_04_02.svg") repeat;
  background-size:208px 159px;
  font-size:15px;
  line-height:1.78;
}
body::before,body::after{
  content:"";
  position:fixed;
  top:8px;
  bottom:8px;
  z-index:0;
  width:3px;
  pointer-events:none;
  border-left:3px double rgba(47,36,43,.25);
}
body::before{left:8px}
body::after{right:8px}
a{
  color:var(--rose);
  text-decoration:none;
}
a:hover,a:focus-visible{
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
  outline:0;
}
button,input,select,textarea{
  font:inherit;
  color:inherit;
}
button{
  appearance:none;
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  color:var(--rose);
  cursor:pointer;
  line-height:1.7;
}
button::before{content:"【"}
button::after{content:"】"}
button:hover,button:focus-visible{
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
  outline:0;
}
button:disabled{
  opacity:.45;
  cursor:default;
  text-decoration:none;
}
.retro-page{
  position:relative;
  z-index:1;
  width:min(1080px,94vw);
  min-height:100dvh;
  margin:0 auto;
  padding:27px 22px 45px;
}
.retro-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  margin:0 0 19px;
  padding:0 0 8px;
  border-bottom:1px dotted #b89aa8;
  color:#7b6671;
  font-size:13px;
}
.tool-head{
  margin:0 0 23px;
}
.tool-head h1{
  margin:0 0 3px;
  color:#9b7f8e;
  font-size:18px;
  font-weight:normal;
  letter-spacing:.04em;
}
.tool-head p{
  margin:0;
  color:#5d4e56;
  font-size:14.5px;
}
.retro-grid{
  display:grid;
  grid-template-columns:34% 66%;
  min-height:570px;
}
.retro-grid>aside{
  padding:0 20px 0 2px;
  border-right:1px solid var(--line);
}
.retro-grid>div{
  min-width:0;
  padding:0 2px 0 22px;
}
.retro-box{
  margin:0 0 23px;
  padding:0;
  border:0;
  background:transparent;
}
.retro-box>h2{
  margin:0 0 9px;
  padding:0 0 4px;
  border-bottom:1px dotted #bfaab3;
  color:#9b7f8e;
  font-size:16px;
  font-weight:normal;
  letter-spacing:.025em;
}
.retro-box>h2 small{
  margin-left:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:normal;
}
.box-body{
  padding:0;
  background:transparent;
}
.row{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.stack{
  display:grid;
  gap:10px;
}
.label{
  display:block;
  margin:0 0 2px;
  color:#8d7080;
  font-size:13px;
  font-weight:normal;
}
.field,.textarea,.codebox{
  width:100%;
  border:0;
  border-bottom:1px solid #bca8b1;
  border-radius:0;
  padding:3px 2px;
  background:rgba(255,255,255,.18);
  outline:0;
}
.field:focus,.textarea:focus,.codebox:focus{
  border-bottom-color:var(--rose);
}
.field.small{width:74px}
.field.mid{width:130px}
.textarea{
  min-height:72px;
  resize:vertical;
}
select.field{
  background:rgba(255,255,255,.16);
}
input[type="color"]{
  width:34px;
  height:23px;
  padding:0;
  border:0;
  background:transparent;
}
input[type="range"]{
  width:100%;
  accent-color:#a6798e;
}
input[type="checkbox"]{
  accent-color:#a6798e;
}
.sep{
  height:0;
  margin:10px 0;
  border:0;
  border-top:1px dotted var(--dot);
}
.tiny{
  color:#786772;
  font-size:11px;
}
.check{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.file-action{
  display:inline-block;
  color:var(--rose);
  cursor:pointer;
}
.file-action:hover{
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
}
.file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.button-grid,.element-wall,.toolstrip,.template-grid{
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  align-items:center;
}
.button-grid{
  margin:2px 0;
}
.retro-button.pink,.retro-button.dark{
  color:var(--rose);
}
.retro-button.danger{
  color:#9c4f69;
}
.preview-well{
  min-height:90px;
  padding:12px 4px;
  overflow:auto;
  text-align:center;
  border-top:1px dotted var(--dot);
  border-bottom:1px dotted var(--dot);
  background:transparent;
}
.preview-well.dark{
  background:rgba(36,28,34,.92);
}
.canvas-wrap{
  display:inline-block;
  position:relative;
  line-height:0;
  background:transparent;
}
.canvas-wrap canvas{
  max-width:100%;
  height:auto;
  image-rendering:pixelated;
  touch-action:none;
}
.badge-stage canvas{
  transform-origin:top left;
}
.actual-note,.statusline{
  margin-top:6px;
  color:#715f69;
  font-family:"MS Gothic","MS PGothic",monospace;
  font-size:11px;
}
.statusline{
  padding-top:5px;
  border-top:1px dotted var(--dot);
}
.layer-list,.block-list{
  display:grid;
  gap:0;
  max-height:220px;
  overflow:auto;
}
.layer-row,.block-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
  padding:5px 1px;
  border:0;
  border-bottom:1px dotted rgba(190,160,174,.48);
  background:transparent;
}
.block-item{
  grid-template-columns:minmax(0,1fr) auto;
}
.layer-row.selected,.block-item.active{
  color:var(--rose);
  background:transparent;
}
.layer-row button,.block-item button{
  text-align:left;
}
.swatch{
  width:20px;
  height:20px;
  padding:0;
  border:1px solid #8a7480;
  background:transparent;
}
.properties-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}
.properties-grid .full{
  grid-column:1/-1;
}
.notice{
  padding:0;
  color:#786772;
  font-style:italic;
  background:transparent;
  border:0;
}
.rei-note{
  margin:24px 0 0;
  padding:8px 0 0;
  border-top:1px dotted #b89aa8;
  color:#6f5b66;
  font-size:13px;
}
.rei-note b{
  color:#9d667f;
  font-weight:normal;
}
.template-card{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
}
.template-card b{
  font-size:13px;
  font-weight:normal;
}
.template-mini{
  display:inline-block;
  width:25px;
  height:11px;
  border:1px solid #81707a;
  background:#3d3138;
  overflow:hidden;
  font-size:0;
}
.mini-pink{background:#dfb8ca}
.mini-check{background:#66515d}
.mini-silver{background:#c5c4c7}
.mini-lilac{background:#ccb9d3}
.mini-red{background:#6b3344}
.mini-night{background:#201a21}
.mini-cream{background:#f4e8d3}
.codebox{
  min-height:210px;
  resize:vertical;
  font:12px/1.55 "Courier New",monospace;
  white-space:pre;
  overflow:auto;
}
.element-wall button{
  text-align:left;
}
.iframe-wrap{
  padding:8px 0;
  overflow:auto;
  border-top:1px dotted var(--dot);
  border-bottom:1px dotted var(--dot);
}
.iframe-wrap iframe{
  display:block;
  width:100%;
  height:420px;
  border:1px solid #8d7a84;
  background:#fff;
}
.image-preview-single{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  overflow:auto;
}
.image-preview-single canvas{
  display:block;
  max-width:100%;
  height:auto;
}
.fortune-main{
  max-width:760px;
  margin:0 auto;
}
.fortune-entry-main{
  padding:22px 0 10px;
  text-align:center;
}
.fortune-date{
  margin:0 0 14px;
  color:#8d7080;
  font-size:13px;
}
.fortune-button{
  margin:18px 0;
  text-align:center;
}
.fortune-result-title{
  margin:0 0 3px;
  color:#9b7f8e;
  font-size:18px;
  font-weight:normal;
}
.fortune-table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
}
.fortune-table th,.fortune-table td{
  padding:7px 3px;
  border-bottom:1px dotted #d8c7ce;
  text-align:left;
  vertical-align:top;
}
.fortune-table th{
  width:72px;
  color:#8d7080;
  font-weight:normal;
}
.fortune-stars{
  color:#a56e88;
  letter-spacing:.16em;
  white-space:nowrap;
}
.fortune-lucky{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0 0 22px;
}
.fortune-lucky div{
  padding:7px 3px;
  border-bottom:1px dotted #d8c7ce;
}
.fortune-lucky b{
  display:block;
  color:#8d7080;
  font-size:12px;
  font-weight:normal;
}
.fortune-box{
  margin:0 0 20px;
  border:0;
  background:transparent;
}
.fortune-box h2{
  margin:0 0 7px;
  padding:0 0 4px;
  border-bottom:1px dotted #bfaab3;
  color:#9b7f8e;
  font-size:15px;
  font-weight:normal;
}
.fortune-box .inside{
  padding:0;
}
.fortune-rei{
  margin:24px 0 0;
  padding:8px 0 0;
  border:0;
  border-top:1px dotted #b89aa8;
  background:transparent;
  color:#6f5b66;
}
@media(max-width:720px){
  .retro-page{
    width:100%;
    padding:25px 15px 32px;
  }
  .retro-top{
    align-items:flex-start;
    font-size:12px;
  }
  .retro-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  .retro-grid>aside{
    padding:0 0 14px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .retro-grid>div{
    padding:18px 0 0;
  }
  .properties-grid{
    grid-template-columns:1fr;
  }
  .fortune-lucky{
    grid-template-columns:1fr;
  }
  .iframe-wrap iframe{
    height:340px;
  }
  body::before{left:5px}
  body::after{right:5px}
}