:root{
  --panel: rgba(10,14,20,.6);
  --fg:#e7eef7;
}

html,body{
  height:100%;
  margin:0;
  background:#04070b;
  color:var(--fg);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
  overflow:hidden;
}

#ui{
  position:fixed;
  left:12px;
  top:12px;
  z-index:10;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:10px 12px;
  backdrop-filter: blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  max-width:320px;
  font-size:12px;
}

#ui h2{
  font-size:13px;
  margin:0 0 6px;
  opacity:.95;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
  flex-wrap:wrap;
}

label{
  font-size:12px;
  opacity:.85;
  min-width:86px;
}

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

select,button,input[type="color"]{
  background:#0b0f16;
  color:var(--fg);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  cursor:pointer;
}

input[type="color"]{
  width:60px;
  height:28px;
  padding:0;
  border-radius:8px;
}

input[type="checkbox"]{
  transform:scale(1.2);
  accent-color:#5af;
  cursor:pointer;
}

#hint{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.45);
  z-index:20;
}

#hint .box{
  background:var(--panel);
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  text-align:center;
  font-size:13px;
  max-width:260px;
  line-height:1.4;
}

#hint button{
  margin-top:10px;
}

#footer{
  position:fixed;
  right:12px;
  bottom:12px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:200px;
}

.kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.2);
  border-bottom-width:2px;
  border-radius:6px;
  font-size:11px
}

.hidden {
  display:none !important;
}

.mini-note{
  font-size:11px;
  line-height:1.3;
  opacity:.6;
  max-width:240px;
}

.pathLabel{
  font-size:11px;
  line-height:1.3;
  opacity:.8;
  word-break:break-all;
  max-width:240px;
}

.exportInfo{
  font-size:11px;
  line-height:1.35;
  opacity:.7;
  max-width:300px;
}

.productizeStatus{
  font-size:11px;
  line-height:1.35;
  opacity:.78;
  max-width:300px;
  word-break:break-all;
}

.shareStatus{
  font-size:11px;
  line-height:1.35;
  opacity:.72;
  max-width:300px;
  word-break:break-all;
}

.handoffStatus{
  font-size:11px;
  line-height:1.35;
  opacity:.72;
  max-width:300px;
  word-break:break-all;
}

.internal-control,
.internal-export-control,
.internal-capture-control,
.internal-export-action,
.internal-recording-action,
#debugSize,
#debugBG{
  display:none !important;
}