.app{height:100vh;display:grid;grid-template-columns:304px minmax(0,1fr);overflow:hidden;background:#050505}
.menu{
  min-height:0;display:flex;flex-direction:column;background:#090909;border-right:1px solid #1d1d1d;
  padding:18px 16px 14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#292929 transparent
}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 2px 16px}
.menu-kicker{font-size:9px;letter-spacing:.15em;color:#626262;margin-bottom:4px}
.menu h1{margin:0;font:700 24px/1 var(--display);letter-spacing:-.025em}
.mode-button{
  border:1px solid #313131;background:transparent;color:#bdbdbd;border-radius:999px;padding:8px 11px;cursor:pointer;font-size:10px
}
.mode-button.active{background:#fff;color:#000;border-color:#fff}
.menu-list{border-top:1px solid #1d1d1d}
.menu-group{border-bottom:1px solid #1d1d1d}
.menu-group summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 2px;color:#d9d9d9;font-size:11px
}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary::before{content:"+";width:14px;color:#616161}
.menu-group[open] summary::before{content:"−";color:#aaa}
.menu-group summary span{flex:1}
.menu-group summary small{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#656565;font-size:9px}
.menu-content{padding:0 2px 16px 18px}
.microcopy{margin:10px 0 0;color:#686868;font-size:9px;line-height:1.55}
.flower-list{display:grid}
.flower-item{
  border:0;border-top:1px solid #181818;background:transparent;color:#8f8f8f;min-height:52px;
  display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;width:100%;padding:4px 2px;cursor:pointer;text-align:left
}
.flower-item:first-child{border-top:0}
.flower-item canvas{width:52px;height:40px;display:block;border-radius:8px}
.flower-item .name{font-size:10px}
.flower-item .mark{font-size:9px;color:transparent}
.flower-item.active{color:#fff}
.flower-item.active .mark{color:#fff}
.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.preset-dot{
  width:25px;height:25px;border-radius:50%;border:1px solid #333;cursor:pointer;padding:0;position:relative
}
.preset-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--flower)}
.preset-dot.active{outline:1px solid #fff;outline-offset:2px}
.color-list{display:grid;gap:7px}
.color-row{display:grid;grid-template-columns:minmax(0,1fr) 32px 72px;gap:7px;align-items:center}
.color-row span{font-size:9px;color:#949494}
.color-row input[type=color]{width:32px;height:28px;border-radius:7px;border:1px solid #292929;padding:2px;background:#101010}
.hex{width:72px;min-width:0;border:1px solid #262626;background:#050505;color:#d5d5d5;border-radius:7px;padding:6px 7px;font-size:9px;text-transform:uppercase}
.selected-label{margin:0 0 12px;color:#919191;font-size:9px;line-height:1.5}
.rotation-row{display:grid;grid-template-columns:52px minmax(0,1fr) 58px;gap:8px;align-items:center}
.rotation-row label{font-size:9px;color:#989898}
.rotation-row input[type=range]{width:100%}
.degree-box{display:flex;align-items:center;border:1px solid #292929;border-radius:7px;background:#050505;padding-right:5px}
.degree-box input{width:42px;border:0;background:transparent;color:#fff;padding:6px 4px 6px 7px;font-size:9px;outline:none}
.degree-box span{font-size:9px;color:#6c6c6c}
.rotate-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.rotate-buttons button,.export-list button{
  border:1px solid #292929;background:transparent;color:#bdbdbd;border-radius:8px;cursor:pointer
}
.rotate-buttons button{padding:7px 4px;font-size:9px}
.rotate-buttons button:disabled{opacity:.32;cursor:not-allowed}
.export-list{display:grid;gap:6px}
.export-list button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;text-align:left
}
.export-list button:hover,.rotate-buttons button:not(:disabled):hover{border-color:#fff;color:#fff}
.export-list button span{font-size:10px;color:#eee}
.export-list button small{font-size:8px;color:#686868}
.export-status{min-height:14px;margin:9px 0 0;color:#808080;font-size:9px;line-height:1.4}
.menu-footer{
  margin-top:auto;padding:24px 2px 4px;border-top:1px solid #1d1d1d;color:#777
}
.footer-star{
  font-family:var(--display);font-size:19px;line-height:1;color:#fff;margin-bottom:12px
}
.footer-overline{
  margin:0 0 7px;text-transform:uppercase;letter-spacing:.11em;color:#777;font-size:8px
}
.footer-message{
  margin:0 0 16px;max-width:26ch;font:700 17px/1.18 var(--display);letter-spacing:-.02em;color:#e9e9e9
}
.footer-signature{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 0;
  border-top:1px solid #1a1a1a;color:#747474;text-decoration:none;font-size:8px
}
.footer-signature strong{
  color:#fff;font-size:10px;letter-spacing:.04em
}
.footer-signature:hover strong{opacity:.68}
.stage{position:relative;min-width:0;min-height:0;background:var(--page);overflow:hidden}
#gardenCanvas{display:block;width:100%;height:100%;cursor:text;touch-action:none}
#gardenCanvas.arrange{cursor:grab}
#gardenCanvas.dragging{cursor:grabbing}
#gardenCanvas.rotating{cursor:grabbing}
.mobile-input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;pointer-events:none;font-size:16px}
.top-hints{
  position:absolute;top:15px;left:18px;right:18px;display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;
  pointer-events:none;color:#5d5d5d;font-size:9px;letter-spacing:.04em
}
.stage-tip{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);border:1px solid #242424;background:#000b;color:#626262;
  border-radius:999px;padding:7px 10px;font-size:9px;pointer-events:none;transition:opacity .18s
}
.stage-tip.hide{opacity:0}
@media(max-width:820px){
  html,body{height:auto;min-height:100%}
  .app{height:auto;min-height:100vh;display:flex;flex-direction:column}
  .stage{order:-1;height:58vh;min-height:410px;border-bottom:1px solid #1d1d1d}
  .menu{overflow:visible;border-right:0;padding-bottom:28px}
  .top-hints{display:none}
}