:root{
  --tauco-red:#ff2a4d;
  --tauco-red-2:#9b0525;
  --tauco-green:#22ff9a;
  --tauco-panel:rgba(10,10,14,.62);
  --tauco-stroke:rgba(255,255,255,.12);
  --tauco-shadow:0 30px 90px rgba(0,0,0,.46);
}

/* ===== page background ===== */
html,body{
  height:auto !important;
  min-height:100% !important;
}

body.tauco-dark,
body.tauco-dark.hedon-mode{
  margin:0 !important;
  overflow:auto !important;
  color:#fff !important;
  background:
    radial-gradient(900px 420px at 14% 8%, rgba(255,42,77,.22), transparent 60%),
    radial-gradient(760px 360px at 88% 18%, rgba(255,206,84,.12), transparent 58%),
    url("https://photosme.site/uploads/kangtoto/1774933202_tauco.webp") center/cover no-repeat fixed !important;
}

body.tauco-dark:before,
body.tauco-dark.hedon-mode:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.64)),
    radial-gradient(900px 460px at 50% 0%, rgba(255,42,77,.12), transparent 64%);
}

/* ===== app shell ===== */
body.tauco-dark.hedon-mode .app{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  height:auto !important;
  min-height:100vh !important;
  padding:10px 0 22px !important;
  background:transparent !important;
}

/* header is hidden, but kept in DOM for JS IDs */
body.tauco-dark.hedon-mode .topbar{
  display:none !important;
}

/* ===== hero ===== */
.hero-tauco{
  width:min(1740px, calc(100vw - 38px)) !important;
  margin:0 auto 12px !important;
  min-height:118px !important;
  padding:18px 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    linear-gradient(115deg, rgba(8,8,12,.72), rgba(58,0,18,.38), rgba(6,6,10,.56)),
    radial-gradient(600px 220px at 18% 0%, rgba(255,42,77,.22), transparent 65%),
    radial-gradient(480px 220px at 96% 20%, rgba(255,210,90,.12), transparent 62%) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow:hidden !important;
  position:relative !important;
}

.hero-copy{
  position:relative !important;
  min-width:0 !important;
}

.hero-kicker{
  display:inline-flex !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,42,77,.34) !important;
  background:rgba(255,42,77,.12) !important;
  color:#ffdede !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.9px !important;
}

.hero-copy h2{
  margin:8px 0 4px !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:1.06 !important;
  letter-spacing:.2px !important;
  text-shadow:0 10px 26px rgba(0,0,0,.42) !important;
}

.hero-copy p{
  margin:0 !important;
  color:rgba(255,255,255,.74) !important;
  font-size:13px !important;
  max-width:660px !important;
}

.hero-pills{display:none !important;}

/* ===== workspace ===== */
body.tauco-dark.hedon-mode .workspace{
  width:min(1740px, calc(100vw - 38px)) !important;
  height:clamp(580px, 66vh, 720px) !important;
  min-height:0 !important;
  margin:0 auto 10px !important;
  padding:12px !important;
  border-radius:22px !important;
  display:grid !important;
  grid-template-columns:minmax(330px,var(--left,50%)) 10px minmax(340px,1fr) !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:10px 0 !important;
  background:
    linear-gradient(180deg, rgba(8,7,10,.72), rgba(8,7,10,.58)),
    radial-gradient(760px 280px at 12% 0%, rgba(255,42,77,.13), transparent 58%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  box-sizing:border-box !important;
}

/* ===== top controlbar ===== */
body.tauco-dark.hedon-mode .top-controlbar,
body.tauco-dark.hedon-mode aside.top-controlbar,
body.tauco-dark.hedon-mode .middle-panel.top-controlbar{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  min-height:58px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  padding:10px 14px !important;
  overflow:visible !important;
  position:relative !important;
  border-radius:18px !important;
  border:1px solid var(--tauco-stroke) !important;
  background:
    linear-gradient(90deg, rgba(10,10,14,.62), rgba(40,8,19,.48), rgba(10,10,14,.62)) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,42,77,.055) !important;
  backdrop-filter:blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(145%) !important;
  color:#fff !important;
}

body.tauco-dark.hedon-mode .top-controlbar::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  pointer-events:none !important;
  background:
    radial-gradient(340px 150px at 10% 0%, rgba(255,42,77,.14), transparent 62%),
    radial-gradient(360px 150px at 88% 0%, rgba(34,255,154,.07), transparent 62%) !important;
  z-index:0 !important;
}

/* hide visual deck label */
body.tauco-dark.hedon-mode .top-controlbar .toolbar-brand{
  display:none !important;
}

body.tauco-dark.hedon-mode .top-controlbar .toolbar-group{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}

body.tauco-dark.hedon-mode .top-controlbar .utility-group{
  margin-left:auto !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
}

/* buttons */
body.tauco-dark.hedon-mode .top-controlbar .btn,
body.tauco-dark.hedon-mode .top-controlbar button,
body.tauco-dark.hedon-mode .top-controlbar label.btn,
body.tauco-dark.hedon-mode .top-controlbar label[for="fileInput"]{
  width:auto !important;
  min-width:0 !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.38) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 24px rgba(0,0,0,.24) !important;
  backdrop-filter:blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(140%) !important;
  opacity:1 !important;
  filter:none !important;
  cursor:pointer !important;
  transition:.18s ease !important;
}

body.tauco-dark.hedon-mode .top-controlbar .btn:hover,
body.tauco-dark.hedon-mode .top-controlbar button:hover{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 28px rgba(0,0,0,.30) !important;
}

body.tauco-dark.hedon-mode .top-controlbar #btnBeautify,
body.tauco-dark.hedon-mode .top-controlbar .btn.blue{
  border:1px solid rgba(255,42,77,.34) !important;
  background:linear-gradient(180deg, rgba(255,42,77,.40), rgba(155,5,37,.22)) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 30px rgba(255,42,77,.18) !important;
}

body.tauco-dark.hedon-mode .top-controlbar #btnRun,
body.tauco-dark.hedon-mode .top-controlbar .btn.green{
  border:1px solid rgba(34,255,154,.28) !important;
  background:linear-gradient(180deg, rgba(34,255,154,.22), rgba(34,255,154,.09)) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 30px rgba(34,255,154,.12) !important;
}

body.tauco-dark.hedon-mode .top-controlbar .btn:disabled,
body.tauco-dark.hedon-mode .top-controlbar button:disabled,
body.tauco-dark.hedon-mode .top-controlbar .btn[disabled],
body.tauco-dark.hedon-mode .top-controlbar button[disabled]{
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.40) !important;
  text-shadow:none !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.18) !important;
  opacity:1 !important;
  filter:none !important;
  cursor:not-allowed !important;
}

/* hide optional controls but keep DOM */
body.tauco-dark.hedon-mode #btnClean[hidden],
body.tauco-dark.hedon-mode #btnCopyClean[hidden],
body.tauco-dark.hedon-mode .hidden-control[hidden]{
  display:none !important;
}

body.tauco-dark.hedon-mode .top-controlbar select{
  width:auto !important;
  min-width:108px !important;
  height:38px !important;
  padding:0 34px 0 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.38) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 24px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(140%) !important;
  appearance:auto !important;
  -webkit-appearance:auto !important;
  outline:none !important;
}

body.tauco-dark.hedon-mode .top-controlbar select option{
  background:#121217 !important;
  color:#fff !important;
}

body.tauco-dark.hedon-mode .top-controlbar .checkline{
  color:rgba(255,255,255,.92) !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}

body.tauco-dark.hedon-mode .top-controlbar .checkline input{
  width:15px !important;
  height:15px !important;
  accent-color:#ff2a4d !important;
}

/* ===== panes ===== */
body.tauco-dark.hedon-mode .editor-pane{
  grid-column:1 !important;
  grid-row:2 !important;
}

body.tauco-dark.hedon-mode #resizeLeft{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
}

body.tauco-dark.hedon-mode #resizeRight{
  display:none !important;
}

body.tauco-dark.hedon-mode .output-pane{
  grid-column:3 !important;
  grid-row:2 !important;
}

body.tauco-dark.hedon-mode .pane{
  border-color:rgba(255,255,255,.17) !important;
  border-radius:14px !important;
  box-shadow:0 18px 55px rgba(0,0,0,.24) !important;
  background:#fff !important;
}

body.tauco-dark.hedon-mode .pane-head{
  height:36px !important;
  flex-basis:36px !important;
  background:linear-gradient(180deg, rgba(105,105,110,.94), rgba(76,76,82,.94)) !important;
  border-bottom:1px solid rgba(0,0,0,.18) !important;
  color:#fff !important;
}

body.tauco-dark.hedon-mode .editor-host{
  background:#fff !important;
}

body.tauco-dark.hedon-mode .preview-host{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:12px !important;
  overflow:auto !important;
  background:linear-gradient(180deg, #141417, #0d0d10) !important;
}

body.tauco-dark.hedon-mode .resize-bar{
  background:transparent !important;
}

body.tauco-dark.hedon-mode .resize-bar:before{
  background:rgba(255,255,255,.26) !important;
}

/* ===== frame/device preview ===== */
body.tauco-dark.hedon-mode .frame-shell{
  min-height:100% !important;
}

body.tauco-dark.hedon-mode .frame-shell:not(.mobile):not(.tablet){
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  overflow:auto !important;
  background:#111 !important;
}

body.tauco-dark.hedon-mode .app:not(.output-fullscreen) .frame-shell:not(.mobile):not(.tablet) iframe{
  width:125% !important;
  height:125% !important;
  min-height:calc((100vh - 210px) * 1.25) !important;
  transform:scale(.80) !important;
  transform-origin:top left !important;
  background:#fff !important;
}

body.tauco-dark.hedon-mode .frame-shell.mobile,
body.tauco-dark.hedon-mode .frame-shell.tablet{
  position:relative !important;
  margin:0 auto !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  outline:0 !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.tauco-dark.hedon-mode .frame-shell.mobile{
  width:min(390px, 100%) !important;
  max-width:390px !important;
  border-radius:18px !important;
}

body.tauco-dark.hedon-mode .frame-shell.tablet{
  width:min(820px, 100%) !important;
  max-width:820px !important;
  border-radius:18px !important;
}

body.tauco-dark.hedon-mode .frame-shell.mobile iframe,
body.tauco-dark.hedon-mode .frame-shell.tablet iframe{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  transform:none !important;
  border:0 !important;
  display:block !important;
  background:#fff !important;
}

/* ===== status ===== */
body.tauco-dark.hedon-mode .statusbar{
  width:min(1740px, calc(100vw - 38px)) !important;
  height:28px !important;
  margin:0 auto !important;
  border-radius:999px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(9,8,12,.76) !important;
  color:rgba(255,255,255,.66) !important;
  box-shadow:0 14px 44px rgba(0,0,0,.28) !important;
}

/* ===== fullscreen editor/output ===== */
body.tauco-dark.hedon-mode .app.editor-fullscreen,
body.tauco-dark.hedon-mode .app.output-fullscreen{
  padding:0 !important;
}

body.tauco-dark.hedon-mode .app.editor-fullscreen .topbar,
body.tauco-dark.hedon-mode .app.editor-fullscreen .hero-tauco,
body.tauco-dark.hedon-mode .app.editor-fullscreen .statusbar,
body.tauco-dark.hedon-mode .app.editor-fullscreen .top-controlbar,
body.tauco-dark.hedon-mode .app.output-fullscreen .topbar,
body.tauco-dark.hedon-mode .app.output-fullscreen .hero-tauco,
body.tauco-dark.hedon-mode .app.output-fullscreen .statusbar,
body.tauco-dark.hedon-mode .app.output-fullscreen .top-controlbar{
  display:none !important;
}

body.tauco-dark.hedon-mode .app.editor-fullscreen .workspace,
body.tauco-dark.hedon-mode .app.output-fullscreen .workspace{
  position:fixed !important;
  inset:14px !important;
  z-index:9999 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:12px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:1fr !important;
  background:
    linear-gradient(180deg, rgba(8,7,10,.86), rgba(8,7,10,.72)),
    radial-gradient(760px 280px at 12% 0%, rgba(255,42,77,.16), transparent 58%) !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.tauco-dark.hedon-mode .app.editor-fullscreen .editor-pane,
body.tauco-dark.hedon-mode .app.output-fullscreen .output-pane{
  display:flex !important;
  grid-column:1 / -1 !important;
  grid-row:1 / -1 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
}

body.tauco-dark.hedon-mode .app.editor-fullscreen .editor-host,
body.tauco-dark.hedon-mode .app.editor-fullscreen .CodeMirror,
body.tauco-dark.hedon-mode .app.output-fullscreen .preview-host{
  flex:1 1 auto !important;
  height:100% !important;
  min-height:0 !important;
}

body.tauco-dark.hedon-mode .app.editor-fullscreen .fallback-editor{
  height:100% !important;
}

body.tauco-dark.hedon-mode .app.editor-fullscreen .find-panel{
  z-index:10002 !important;
}

body.tauco-dark.hedon-mode .app.output-fullscreen .preview-host{
  padding:0 !important;
}

body.tauco-dark.hedon-mode .app.output-fullscreen .frame-shell,
body.tauco-dark.hedon-mode .app.output-fullscreen .frame-shell.mobile,
body.tauco-dark.hedon-mode .app.output-fullscreen .frame-shell.tablet{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  margin:0 !important;
}

body.tauco-dark.hedon-mode .app.output-fullscreen .frame-shell iframe,
body.tauco-dark.hedon-mode .app.output-fullscreen .frame-shell.mobile iframe,
body.tauco-dark.hedon-mode .app.output-fullscreen .frame-shell.tablet iframe{
  transform:none !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
}

/* ===== responsive shell ===== */
@media(max-width:1280px){
  body.tauco-dark.hedon-mode .topbar,
  .hero-tauco,
  body.tauco-dark.hedon-mode .workspace,
  body.tauco-dark.hedon-mode .statusbar{
    width:calc(100vw - 20px) !important;
  }

  .hero-tauco{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  body.tauco-dark.hedon-mode .workspace{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 560px 560px !important;
    height:auto !important;
  }

  body.tauco-dark.hedon-mode .top-controlbar{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    min-height:auto !important;
  }

  body.tauco-dark.hedon-mode .top-controlbar .toolbar-group,
  body.tauco-dark.hedon-mode .top-controlbar .utility-group{
    justify-content:flex-start !important;
    margin-left:0 !important;
    flex-wrap:wrap !important;
  }

  body.tauco-dark.hedon-mode .editor-pane{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body.tauco-dark.hedon-mode .output-pane{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  body.tauco-dark.hedon-mode #resizeLeft,
  body.tauco-dark.hedon-mode #resizeRight{
    display:none !important;
  }

  body.tauco-dark.hedon-mode .frame-shell.mobile,
  body.tauco-dark.hedon-mode .frame-shell.tablet{
    width:100% !important;
    max-width:none !important;
    height:560px !important;
    border-radius:18px !important;
  }

  body.tauco-dark.hedon-mode .app:not(.output-fullscreen) .frame-shell:not(.mobile):not(.tablet) iframe{
    width:100% !important;
    height:100% !important;
    min-height:560px !important;
    transform:none !important;
  }

  body.tauco-dark.hedon-mode .app.editor-fullscreen .workspace,
  body.tauco-dark.hedon-mode .app.output-fullscreen .workspace{
    inset:8px !important;
  }
}