@import url("./theme.css");
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --panel-scrollbar-thin:3px;
  --panel-scrollbar-thick:16px;
}
html, body{height:100%}
html{
  overflow:hidden;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  padding:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(42,58,102,.14) transparent;
}
body.is-scrollbar-hover{
  scrollbar-width:auto;
  scrollbar-color:#3b4e86 transparent;
}
body::-webkit-scrollbar{
  width:var(--panel-scrollbar-thick);
  height:var(--panel-scrollbar-thick);
}
body::-webkit-scrollbar-track{
  background:transparent;
  border-radius:999px;
  border:0;
}
body::-webkit-scrollbar-thumb{
  background:rgba(42,58,102,.05);
  border-radius:999px;
  border:calc((var(--panel-scrollbar-thick) - var(--panel-scrollbar-thin)) / 2) solid transparent;
  background-clip:padding-box;
  min-height:28px;
  transition:border .12s ease, background-color .12s ease;
}
body.is-scrollbar-hover::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb:hover{
  background:#3b4e86;
  border:0 solid transparent;
}
.stack{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  padding:10px 0;
  width:calc(100% - 32px);
  margin:0 auto;
}
.tabsArea{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  background: rgba(0, 0, 0, 0.01);
  border:0px solid var(--border);
  border-radius:var(--radius);
  padding:0 0 12px 0;
  position:relative;
  box-shadow:0 12px 24px rgba(6,12,28,.35) inset;
}
.tabsHeader{
  display:flex;
  gap:2px;
  flex-wrap:wrap;
  margin:0px 0px -3px 0px;
  padding:0 0 0 64px;
  align-items:flex-end;
  position:relative;
  z-index: 3;
  width:100%;
}
.tabsButton{
  background:linear-gradient(180deg, #151f3a 0%, #101a33 100%);
  border:1px solid rgba(122,147,208,.35);
  border-bottom:none;
  color:rgba(183,198,238,.7);
  padding:9px 16px;
  border-radius:10px 10px 0 0;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  line-height:1.2;
  z-index:2;
  box-shadow:0 6px 12px rgba(6,12,28,.25);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  opacity:.7;
  margin-bottom:0px;
}
.tabsButton.is-active{
  background:var(--panel-2);
  color:#e8edff;
  border:3px solid rgba(122,147,208,.45);
  z-index:3;
  opacity:1;
  margin-bottom:0px;
}
.tabsButton.is-active::after{
  content:"";
  position:absolute;
  left:0px;
  right:0px;
  bottom:-3px;
  height:3px;
  background:rgba(15, 23, 48, 0.95);
  border-radius:0;
}
.tabsButton--floatingIcon{
  position:absolute;
  top:0px;
  left:12px;
  z-index:4;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
  margin:0;
  font-size:23px;
  line-height:1;
  color:rgba(183,198,238,.92);
  opacity:.8;
  pointer-events:auto;
  user-select:none;
}
.tabsButton--floatingIcon:hover{
  color:#e8edff;
  border-color:transparent;
  opacity:1;
}
.tabsButton--floatingIcon.is-active{
  border:0;
  background:transparent;
  box-shadow:none;
  color:#e8edff;
  opacity:1;
}
.tabsButton--floatingIcon.is-active::after{
  display:none;
}
.tabsContent.is-active .tabsBody{
  border-top-color:#27365f;
}
.tabsButton:hover{
  color:#e8edff;
  border-color:#3a4f86;
}
.main-tab-panels{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  margin-top:0px;
}
.tabsBody{
  background:linear-gradient(180deg, rgba(15,23,48,.98), rgba(11,16,32,.98));
  border:3px solid rgba(122,147,208,.45);
  border-radius:var(--radius);
  padding:14px 12px 12px 12px;
  width:100%;
}
.tabsContent{
  display:none;
  flex-direction:column;
  gap:var(--gap);
}
.tabsContent.is-active{
  display:flex;
}
.debugger{
  margin-top:var(--gap);
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:calc(100% - 32px);
  margin-left:auto;
  margin-right:auto;
}
.debugger h4{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:var(--muted);
}
.debug-legend{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px 12px;
  font-size:12px;
  color:var(--muted);
}
.legend-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.legend-toggle{
  display:none;
  width:14px;
  height:14px;
  accent-color:var(--accent);
  cursor:pointer;
}
body.debug .legend-toggle{
  display:inline-flex;
}
.legend-line{
  width:28px;
  height:0;
  border-top:2px solid transparent;
}
.legend-line.dashed{
  border-top-style:dashed;
}
.legend-line.solid{
  border-top-style:solid;
}
.legend-stack{border-top-color:#00d1ff;}
.legend-main-tabs{border-top-color:#ff2a2a;}
.legend-main-tab-body{border-top-color:#3ad6ff;}
.legend-main-tabs-header{border-top-color:#ff7a00;}
.legend-menu-option{border-top-color:#7c5cff;}
.legend-menu-body{border-top-color:#00e676;}
.legend-menu-list{border-top-color:#ffb300;}
.legend-menu-list-body{border-top-color:#ff5c8a;}
.legend-menu-item{border-top-color:#a0ff4f;}
.menu-option{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0;
}
.menu-option + .menu-option{
  margin-top:12px;
}
.menu-option summary{
  cursor:pointer;
  padding:14px;
  border-radius:var(--radius);
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.menu-option h3{
  font-size:15px;
  letter-spacing:.2px;
  color:var(--muted);
  text-transform:uppercase;
  margin:0;
  display:inline;
}
.menu-summary-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.summary-icon-btn{
  width:38px;
  height:38px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:rgba(183,198,238,.92);
  font-size:23px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.8;
  transition:color .15s ease, opacity .15s ease;
}
.summary-icon-btn:hover{
  color:#e8edff;
  opacity:1;
}
.summary-icon-btn:focus-visible{
  outline:2px solid #6aa1ff;
  outline-offset:2px;
}
.menu-option .menu-body{
  padding:0 14px 14px 14px;
}
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tab{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}
.tab.is-active{
  color:var(--text);
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(106,161,255,.15) inset;
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
label{
  font-size:14px;
  color:var(--muted);
  min-width:110px;
}
input[type="text"], select{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  min-width:160px;
  outline:none;
}
input[type="range"]{
  accent-color:var(--accent);
  width:160px;
}
.chip{
  background:rgba(53,209,176,.15);
  color:var(--accent-2);
  border:1px solid rgba(53,209,176,.4);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
}
.btn{
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:13px;
}
.btn.primary{
  border-color:var(--accent);
  background:rgba(106,161,255,.12);
}
.btn.danger{
  border-color:rgba(255,107,107,.7);
  background:rgba(255,107,107,.12);
  color:#ffdada;
}
.toggle{
  display:flex;
  align-items:center;
  gap:8px;
}
.switch{
  width:42px;
  height:22px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:999px;
  position:relative;
}
.switch::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  background:var(--accent);
  border-radius:50%;
  top:2px;
  left:2px;
}
.list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.list-item{
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  color:var(--muted);
  font-size:14px;
}
.menu-list{
  background:#0a1128;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
}
.menu-list + .menu-list{margin-top:10px}
summary{
  cursor:pointer;
  color:var(--text);
  font-size:14px;
  list-style:revert;
}
.menu-list > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.menu-list > summary::-webkit-details-marker{display:none}
.menu-list > summary::before{
  content:"▾";
  color:rgba(232,237,255,.95);
  font-size:12px;
  line-height:1;
  transform:translateY(-1px);
}
.menu-list:not([open]) > summary::before{
  content:"▸";
}
.menu-option > summary::-webkit-details-marker{display:none}
.menu-option > summary::before{
  content:"●";
  color:rgba(232,237,255,0.15);
  font-size:10px;
  line-height:1;
  transform:translateY(-1px);
}
.menu-option:not([open]) > summary::before{
  content:"▸";
  font-size:12px;
}
.menu-list-body{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  margin-top:10px;
}
.menu-item{
  background:rgba(31,42,74,.4);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.paramStack{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.paramRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border:0px solid rgba(122,147,208,.22);
  border-radius:8px;
  background:rgba(12,21,43,.7);
}
.paramInfo{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.paramName{
  min-width:0;
  font-size:14px;
  color:rgba(223,232,251,.96);
  line-height:1.15;
}
.paramMeta{
  font-size:11px;
  letter-spacing:.02em;
  color:rgba(169,187,228,.8);
  line-height:1.2;
}
.paramMeta--ellipsis{
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.paramControl{
  display:flex;
  align-items:center;
  gap:6px;
}
.paramControl--toggle{
  min-width:118px;
  justify-content:flex-end;
}
.paramInput,
.paramSelect{
  width:92px;
  min-width:92px;
  min-height:26px;
  border-radius:7px;
  border:1px solid rgba(122,147,208,.45);
  background:rgba(16,24,45,.98);
  color:#ecf2ff;
  font-size:13px;
  line-height:1.1;
  padding:4px 6px;
  outline:none;
}
.paramSelect{
  width:116px;
  min-width:116px;
}
.paramInput:focus,
.paramSelect:focus{
  border-color:rgba(106,161,255,.95);
  box-shadow:0 0 0 2px rgba(106,161,255,.24);
}
.paramUnit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:20px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(106,161,255,.36);
  background:rgba(29,44,79,.6);
  color:rgba(201,218,252,.95);
  font-size:11px;
  letter-spacing:.02em;
  text-transform:lowercase;
}
.teePanel{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.teePanel .menu-list{
  background:rgba(9,16,37,.82);
  border:1px solid rgba(72,98,156,.32);
  border-radius:12px;
  padding:5px 14px;
}
.teePanel .menu-list + .menu-list{
  margin-top:0;
}
.teePanel .menu-list > summary{
  min-height:34px;
  padding:6px 8px;
  font-size:14px;
  letter-spacing:.01em;
}
.teePanel .menu-list[open] > summary{
  margin-bottom:8px;
  padding-bottom:8px;
}
.teePanel .menu-list-body{
  margin-top:0;
  margin-bottom:14px;
  gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.teePanel .menu-item{
  padding:8px;
  gap:6px;
  container-type:inline-size;
}
.teePanel .paramStack{
  grid-template-columns:1fr;
}
.teeSkinBody{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.teeSkinPresetItem{
  background:rgba(52,86,122,.75);
  border:1px solid rgba(92,138,184,.72);
  border-radius:8px;
  gap:6px;
  flex:1 1 0;
  min-width:0;
}
.teeSkinPreviewHeader{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid rgba(95,145,197,.7);
  background:rgba(40,73,108,.86);
  color:#e7f0ff;
  font-size:20px;
  line-height:1;
}
.teeSkinPreviewModes{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:4px;
}
.teeSkinPreviewModeBox{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  align-items:center;
  gap:6px;
  min-height:74px;
  border-radius:6px;
  border:1px solid rgba(88,135,184,.68);
  background:rgba(30,60,94,.84);
  padding:4px 8px;
}
.teeSkinPreviewModeLabel{
  font-size:13px;
  color:rgba(235,243,255,.95);
  text-align:center;
}
.teeSkinTeamPreviewRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:4px;
}
.teeSkinTeamPreviewRow--identity{
  display:flex;
  align-items:center;
  gap:8px;
}
.teeSkinModePreview{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  border:1px solid rgba(87,133,183,.62);
  background:
    linear-gradient(180deg, rgba(24,48,78,.94), rgba(16,36,61,.95));
}
.teeSkinModePreview--normal{
  max-width:112px;
}
.teeSkinSelectedNameBar{
  min-height:28px;
  border-radius:6px;
  border:1px solid rgba(88,135,184,.68);
  background:rgba(42,76,112,.84);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
}
.teeSkinSelectedName{
  font-size:13px;
  color:rgba(236,245,255,.96);
  text-transform:lowercase;
}
.teeSkinPresetItem .paramRow{
  background:rgba(30,58,89,.82);
  border:1px solid rgba(86,133,180,.66);
}
.teeSkinPresetItem .paramInput,
.teeSkinPresetItem .paramSelect{
  background:rgba(21,46,75,.95);
  border-color:rgba(103,154,206,.75);
}
.teeSkinPartsItem{
  background:rgba(58,92,128,.7);
  border:1px solid rgba(98,145,191,.7);
  border-radius:8px;
  padding:6px;
  gap:4px;
  flex:1 1 0;
  min-width:0;
}
.teeSkinDotPages{
  display:block;
  width:100%;
  grid-column:1 / -1;
}
.teeSkinDotPage{
  width:100%;
}
.teeSkinDotPage[hidden]{
  display:none !important;
}
.teeSkinDotPage--editor{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.teeSkinDotPage--blank{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-height:0;
}
.teeSkinIdentityItem{
  display:grid;
  grid-template-columns:120px minmax(180px, 1fr);
  align-items:center;
  gap:10px;
  width:min(560px, 100%);
  padding:8px;
  border-radius:14px;
  border:1px solid var(--skin-page-card-border);
  background:var(--skin-page-card-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.teeSkinIdentityItem--teamSplit{
  gap:14px;
}
.teeSkinIdentityItem--teamSplit .teeSkinIdentityFields{
  padding-left:0px;
  justify-items:end;
}
.teeSkinIdentityItem--teamSplit .teeSkinIdentityTeamLine{
  grid-template-columns:auto auto;
  justify-content:end;
}
.teeSkinIdentityItem--teamSplit .teeSkinTeamPreviewRow--identity{
  justify-content:end;
}
.teeSkinIdentityItem--teamSplit .teeSkinIdentityTeamLabel{
  text-align:right;
}
.teeSkinIdentityPreview{
  width:120px;
  height:84px;
  display:block;
  border-radius:6px;
  background:var(--skin-preview-frame-bg);
}
.teeSkinIdentityPreview--team{
  flex:0 0 auto;
}
.teeSkinIdentityFields{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  min-width:0;
}
.teeSkinIdentityTeamLine{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  min-width:0;
}
.teeSkinIdentityTeamLabel{
  font-size:14px;
  font-weight:600;
  color:rgba(186,194,209,.82);
  white-space:nowrap;
}
.teeSkinIdentityItem .teeSkinIdentityInput[type="text"]{
  width:100%;
  min-width:0;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--skin-input-border);
  border-radius:9px;
  background:var(--skin-input-bg);
  color:var(--skin-input-text);
  font-size:16px;
  line-height:1.15;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.teeSkinIdentityItem .teeSkinIdentityInput[type="text"]:focus{
  border-color:var(--skin-input-focus-border);
  box-shadow:0 0 0 2px rgba(106,161,255,.16);
}
.teeSkinIdentityItem .teeSkinIdentityInput[type="text"]::placeholder{
  color:var(--skin-page-input-placeholder);
}
.teeSkinVisualPickerItem{
  position:relative;
  width:min(560px, 100%);
  padding:8px;
  border-radius:14px;
  border:1px solid var(--skin-page-card-border);
  background:var(--skin-page-card-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.teeSkinVisualPickerLabel{
  margin:1px 2px 8px;
  color:rgba(182,190,202,0.5);
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
}
.teeSkinVisualPickerLabelButton{
  width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:1px auto 8px;
  padding:2px 10px;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  transition:background-color .15s ease;
}
.teeSkinVisualPickerLabelButton::after{
  content:"▾";
  font-size:9px;
  line-height:1;
  opacity:.78;
  transform:translateY(-1px);
  transition:transform .15s ease;
}
.teeSkinVisualPickerLabelButton:hover{
  background:rgba(255,255,255,.06);
}
.teeSkinVisualPickerLabelButton:focus{
  outline:none;
  background:rgba(255,255,255,.06);
}
.teeSkinVisualPickerLabelButton:active,
.teeSkinVisualPickerLabelButton.is-open{
  background:rgba(255,255,255,.1);
}
.teeSkinVisualPickerLabelButton.is-open::after{
  transform:translateY(-1px) rotate(180deg);
}
.teeSkinVisualVersionOverlay{
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:12;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  min-width:184px;
  padding:12px 15px;
  border-radius:10px;
  border:1px solid var(--skin-page-card-border);
  background:rgba(15,23,48,.98);
  box-shadow:0 8px 22px rgba(0,0,0,.36);
}
.teeSkinVisualVersionOverlay[hidden]{
  display:none !important;
}
.teeSkinVisualVersionOption{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:26px;
  width:100%;
  padding:2px 0;
  color:rgba(182,190,202,.82);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.05em;
  text-transform:none;
  cursor:pointer;
}
.teeSkinVisualVersionOption input[type="radio"]{
  margin:0;
  width:15px;
  height:15px;
  accent-color:rgba(210,216,226,.92);
}
.teeSkinSimpleCustomizerItem{
  --tee-marking-grid-rows:5;
  --tee-marking-slot-height:64px;
  --tee-marking-preview-width:96px;
  height:568px;
  max-height:568px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.teeSkinSimpleTabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:4px;
  padding-bottom:14px;
}
.teeSkinSimpleTab{
  min-height:32px;
  border:0;
  background:var(--skin-control-bg);
  color:rgba(223,228,236,.94);
  border-radius:14px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.teeSkinSimpleTab:hover{
  background:var(--skin-control-hover-bg);
}
.teeSkinSimpleTab.is-active{
  background:var(--skin-control-active-bg);
  color:var(--skin-control-active-text);
}
.teeSkinSimpleTab:focus{
  outline:none;
}
.teeSkinSimpleTab:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(164,196,255,.72);
}
.teeSkinSimplePanel{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
.teeSkinSimplePanel[hidden]{
  display:none !important;
}
.teeSkinSimpleColorGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.teeSkinSimpleColorRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:34px;
  border:1px solid var(--skin-control-border);
  border-radius:8px;
  background:var(--skin-option-bg);
  padding:6px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.teeSkinSimpleColorLabel{
  font-size:14px;
  color:rgba(214,219,228,.92);
  letter-spacing:.3px;
}
.teeSkinSimpleColorInput{
  width:34px;
  min-width:36px;
  height:36px;
  border:1px solid rgba(122,147,208,.58);
  border-radius:36px;
  background:var(--skin-control-bg);
  padding:0;
  cursor:pointer;
}
.teeSkinSimpleColorInput::-webkit-color-swatch-wrapper{
  padding:0;
}
.teeSkinSimpleColorInput::-webkit-color-swatch{
  border:0;
  border-radius:5px;
}
.teeSkinSimpleColorInput::-moz-color-swatch{
  border:0;
  border-radius:5px;
}
.customColorPickerPanel{
  position:fixed;
  z-index:11000;
  width:236px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--skin-control-border);
  background:linear-gradient(180deg, rgba(18,26,51,.98) 0%, rgba(11,17,35,.99) 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.55);
  display:none;
  grid-template-columns:1fr;
  gap:8px;
}
.customColorPickerPanel.is-open{
  display:grid;
}
.customColorPickerTop{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 16px 16px;
  gap:8px;
  align-items:stretch;
}
.customColorPickerTop.no-alpha{
  grid-template-columns:minmax(0, 1fr) 16px;
}
.customColorPickerSv{
  --h:0;
  position:relative;
  width:100%;
  height:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, #fff 0%, hsl(var(--h),100%,50%) 100%);
  cursor:crosshair;
  overflow:hidden;
}
.customColorPickerSvKnob{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.customColorPickerTone{
  --cp-r:255;
  --cp-g:255;
  --cp-b:255;
  position:relative;
  width:16px;
  height:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 100%),
    rgb(var(--cp-r),var(--cp-g),var(--cp-b));
  cursor:pointer;
  overflow:hidden;
}
.customColorPickerToneKnob{
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  pointer-events:none;
  background:#0f1722;
}
.customColorPickerAlpha{
  --cp-r:255;
  --cp-g:255;
  --cp-b:255;
  position:relative;
  width:16px;
  height:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to top, rgba(var(--cp-r),var(--cp-g),var(--cp-b),1) 0%, rgba(var(--cp-r),var(--cp-g),var(--cp-b),0) 100%),
    repeating-linear-gradient(45deg, #8390a3 0 6px, #667284 6px 12px);
  cursor:pointer;
  overflow:hidden;
}
.customColorPickerAlpha.is-hidden{
  display:none;
}
.customColorPickerAlphaKnob{
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  pointer-events:none;
  background:#0f1722;
}
.customColorPickerHue{
  width:100%;
  height:14px;
  margin:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.customColorPickerHue::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  background:#0f1722;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.customColorPickerHue::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  background:#0f1722;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.customColorPickerMeta{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:8px;
  align-items:center;
}
.customColorPickerPreview{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  background:var(--skin-control-bg);
}
.customColorPickerHex{
  width:100%;
  height:24px;
  border-radius:6px;
  border:1px solid var(--skin-control-border);
  background:var(--skin-input-bg);
  color:#e7f0fb;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  padding:0 7px;
  outline:none;
}
.customColorPickerHex:focus{
  border-color:#6ea8ff;
  box-shadow:0 0 0 2px rgba(110, 168, 255, 0.2);
}
.customColorPickerRgb{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
}
.customColorPickerRgb.no-alpha{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.customColorPickerRgb label{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  font-size:10px;
  color:rgba(197,205,216,.9);
  letter-spacing:.2px;
}
.customColorPickerRgb input{
  width:100%;
  height:24px;
  border-radius:6px;
  border:1px solid var(--skin-control-border);
  background:var(--skin-input-bg);
  color:#e7f0fb;
  font-size:12px;
  font-weight:700;
  padding:0 6px;
  outline:none;
  text-align:center;
}
.customColorPickerRgb input:focus{
  border-color:#6ea8ff;
  box-shadow:0 0 0 2px rgba(110, 168, 255, 0.2);
}
.customColorPickerRowA.is-hidden{
  display:none;
}
.teeSkinSimpleControlsRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.teeSkinSimpleInlineControl{
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(214,219,228,.92);
  font-size:12px;
  border:1px solid var(--skin-control-border);
  border-radius:8px;
  background:var(--skin-option-bg);
  padding:5px 8px;
}
.teeSkinSimpleInlineControl--alpha{
  min-width:180px;
}
.teeSkinSimpleAlphaInput{
  width:110px;
}
.teeSkinVisualPickerGrid--part{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  grid-template-rows:repeat(var(--tee-marking-grid-rows), minmax(0, 1fr));
  flex:1 1 0;
  min-height:0;
  padding:1px;
}
#tee-skin-marking-picker-grid.teeSkinVisualPickerGrid--part{
  min-height:0;
  align-content:start;
}
.teeSkinPartPageNav{
  display:flex;
  flex:0 0 24px;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:24px;
  padding:2px 0 4px;
}
.teeSkinPartPageNav--horizontalScroll{
  justify-content:center;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  padding-inline:8px;
  scrollbar-width:thin;
}
.teeSkinPartPageNav--horizontalScroll .teeSkinPartPageDot{
  flex:0 0 auto;
}
.teeSkinPartPageNav[hidden]{
  display:none !important;
}
.teeSkinPartPageDot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:0;
  background:rgba(29,56,89,.86);
  cursor:pointer;
  box-shadow:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.teeSkinPartPageDot:hover{
  background:rgba(49,83,126,.98);
}
.teeSkinPartPageDot.is-active{
  background:rgba(218,231,248,.96);
  transform:scale(1.09);
}
.teeSkinPartPageDot:focus{
  outline:none;
}
.teeSkinPartPageDot:focus-visible{
  box-shadow:0 0 0 2px rgba(106,161,255,.5);
}
.teeSkinPartVisualButton{
  min-height:0;
  height:100%;
}
.teeSkinPartVisualPreview{
  width:min(var(--tee-marking-preview-width), 100%);
  max-height:100%;
  object-fit:contain;
}
.teeSkinPartVisualButton[hidden]{
  display:none !important;
}
.teeSkinVisualPresetButton[hidden]{
  display:none !important;
}
.teeSkinContainerStub{
  position:relative;
}
.teeSkinContainerStub--visual{
  min-height:568px;
}
.teeSkinVisualPickerGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px 8px;
  justify-items:center;
  align-items:center;
  align-content:start;
  overflow:hidden;
}
#tee-skin-visual-picker-grid.teeSkinVisualPickerGrid{
  --tee-skin-visual-grid-rows:8;
  --tee-skin-visual-slot-height:64px;
  grid-auto-rows:var(--tee-skin-visual-slot-height);
  min-height:calc((var(--tee-skin-visual-slot-height) * var(--tee-skin-visual-grid-rows)) + (6px * (var(--tee-skin-visual-grid-rows) - 1)));
}
#tee-skin-visual-picker-grid .teeSkinVisualPresetButton{
  min-height:var(--tee-skin-visual-slot-height);
}
.teeSkinVisualPresetButton{
  border:0;
  border-radius:10px;
  background:transparent;
  width:100%;
  max-width:100%;
  padding:2px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:hidden;
}
.teeSkinVisualPresetButton:hover{
  background:var(--skin-picker-item-hover-bg);
}
.teeSkinVisualPresetButton.is-active{
  background:var(--skin-picker-item-active-bg);
}
.teeSkinVisualPresetButton:focus{
  outline:none;
}
.teeSkinVisualPresetButton:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(164,196,255,.72);
}
.teeSkinVisualPresetPreview{
  width:min(96px, 100%);
  height:auto;
  display:block;
  border-radius:0;
  border:0;
}
.teeSkinDotNav{
  display:none;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:2px 0;
  grid-column:1 / -1;
  width:min(560px, 100%);
  margin:0 auto;
}
.teeSkinDotButton{
  width:12px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(120,166,214,.85);
  background:rgba(29,56,89,.86);
  cursor:pointer;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.teeSkinDotButton:hover{
  border-color:rgba(174,206,242,.95);
}
.teeSkinDotButton.is-active{
  background:rgba(218,231,248,.96);
  border-color:rgba(235,244,255,.98);
  transform:scale(1.08);
}
.teeSkinCustomizeHeader{
  min-height:30px;
  border-radius:6px;
  border:1px solid rgba(95,145,197,.7);
  background:rgba(42,76,112,.84);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e7f0ff;
  font-size:16px;
}
.teeSkinPartTabs{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:2px;
}
.teeSkinPartTab{
  min-height:30px;
  border:1px solid rgba(82,126,171,.72);
  background:rgba(25,49,78,.94);
  color:rgba(227,238,255,.95);
  border-radius:6px;
  text-transform:lowercase;
  font-size:13px;
  cursor:pointer;
}
.teeSkinPartTab.is-active{
  background:rgba(190,200,214,.98);
  border-color:rgba(226,234,246,.9);
  color:rgba(24,35,52,.95);
}
.teeSkinParts{
  display:block;
}
.teeSkinPartPanel{
  border:1px solid rgba(83,126,170,.72);
  border-radius:6px;
  background:rgba(33,63,95,.88);
  padding:6px;
}
.teeSkinPartPanelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:30px;
  border-radius:6px;
  border:1px solid rgba(86,132,179,.72);
  background:rgba(28,54,84,.9);
  padding:4px 6px;
  margin-bottom:6px;
}
.teeSkinPartPanelTitle{
  font-size:13px;
  color:rgba(231,239,254,.96);
  text-transform:lowercase;
}
.teeSkinPartPanelPreviewWrap{
  flex:0 0 auto;
  width:72px;
  height:48px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(91,138,186,.74);
  background:rgba(16,34,58,.95);
}
.teeSkinPartPreview{
  width:100%;
  height:100%;
  display:block;
}
.teeSkinPartPanel .paramStack{
  grid-template-columns:1fr;
  gap:5px;
}
.teeSkinPartPanel .paramRow{
  grid-template-columns:minmax(0, 1fr) minmax(186px, auto);
  background:rgba(26,52,82,.86);
  border:1px solid rgba(82,126,171,.68);
  border-radius:6px;
  padding:6px;
}
.teeSkinPartPanel .paramControl{
  justify-content:flex-start;
}
.teeSkinPartPanel .paramInput{
  width:76px;
  min-width:76px;
  background:rgba(18,38,63,.97);
  border-color:rgba(96,144,195,.76);
}
.teeSkinPartPanel .paramSelect{
  width:124px;
  min-width:124px;
  background:rgba(18,38,63,.97);
  border-color:rgba(96,144,195,.76);
}
.teeSkinPartPanel .paramControl--skinColor{
  min-width:188px;
  gap:6px;
}
.teeSkinPartPanel .skinColorSlider{
  width:84px;
  min-width:84px;
  accent-color:#8bb7ff;
}
.teeSkinPartPanel .skinColorInput{
  width:64px;
  min-width:64px;
}
.teeSkinPartPanel .paramName{
  color:rgba(232,241,255,.95);
}
.teeSkinPartPanel .paramMeta{
  color:rgba(179,201,231,.88);
}
.teeSkinPartPanel .skinColorSlider:disabled,
.teeSkinPartPanel .skinColorInput:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.teeSkinActionsItem{
  background:transparent;
  border:0;
  padding:0;
  grid-column:1 / -1;
}
.teeSkinActionsItem .badge{
  display:block;
  width:min(560px, 100%);
  margin:0 auto 2px;
}
.teeSkinActionsItem .row{
  width:min(560px, 100%);
  margin:0 auto;
  justify-content:flex-end;
  gap:8px;
}
.teeSkinActionsItem .btn{
  min-width:136px;
  min-height:36px;
  border-radius:8px;
  background:rgba(75,102,132,.95);
  border-color:rgba(115,154,194,.86);
}
.teeSkinActionResetButton{
  min-width:136px;
  min-height:36px;
  border-radius:8px;
  padding:0 12px;
}
.teeSkinActionCustomizeButton{
  min-width:136px;
  min-height:36px;
  border-radius:8px;
  padding:0 12px;
}
.teeSkinActionBackButton{
  min-width:136px;
  min-height:36px;
  border-radius:8px;
  padding:0 12px;
  margin-right:auto;
}
.teeMotionGrid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
  grid-auto-flow:row dense;
  grid-auto-rows:min-content;
}
.teeMotionGrid .menu-item{
  align-self:stretch;
  gap:8px;
}
.teeMotionGrid .menu-item:nth-child(3){
  grid-column:1 / -1;
}
.teeMotionGrid .paramStack{
  gap:8px;
}
.teeMotionGrid .paramRow{
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  padding:7px 8px;
}
.teeMotionGrid .paramMeta{
  font-size:11px;
  line-height:1.2;
}
.teeMotionGrid .paramControl{
  justify-content:flex-start;
}
.teeMotionGrid .paramInput{
  width:92px;
  min-width:92px;
}
.teeHookParams{
  gap:8px;
}
.teeHookParams .paramRow{
  min-height:100%;
}
.teeDashBlock{
  padding:5px 14px;
}
.teeDashBlock > .menu-list-body{
  margin-top:0;
  grid-template-columns:1fr;
  gap:8px;
}
.teeDashBlock .paramRow{
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}
.teeDashBlock [hidden]{
  display:none !important;
}
.teeDashBlock .paramName{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(11px, 5.2cqi, 14px);
  line-height:1.1;
}
.teeDashBlock .paramInput,
.teeDashBlock .paramSelect{
  width:84px;
  min-width:84px;
  padding:4px 5px;
}
.teeDashBlock .paramSelect{
  width:104px;
  min-width:104px;
}
.teeDashBlock .paramControl--toggle{
  min-width:104px;
}
.teeDashBlock:not(.is-advanced-open) > .menu-list-body > .teeDashCategory:not(.teeDashPrimary){
  display:none;
}
.teeDashCategory{
  display:block;
  padding:8px;
}
.teeDashCategory > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:0;
  cursor:pointer;
  margin-bottom:6px;
  padding:0;
}
.teeDashCategory > summary::-webkit-details-marker{
  display:none;
}
.teeDashCategory > summary::marker{
  content:"";
}
.teeDashCategory:not([open]) > summary{
  margin-bottom:0;
}
.teeDashCategory > .paramStack{
  grid-template-columns:1fr;
}
.teeDashPrimary > .paramStack{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.teeDashQuickRow{
  grid-column:1 / -1;
}
.teeDashPrimary .teeDashAdvancedLink{
  grid-column:1 / -1;
  text-align:right;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
  padding-top:2px;
  background:none;
  border:0;
  cursor:pointer;
  justify-self:end;
  font-family:inherit;
  line-height:1.2;
}
.teeDashPrimary .teeDashAdvancedLink:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.teeTapDashSectionToggle{
  grid-column:1 / -1;
  text-align:left;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
  padding-top:2px;
  background:none;
  border:0;
  cursor:pointer;
  justify-self:start;
  font-family:inherit;
  line-height:1.2;
}
.teeTapDashSectionToggle .teeTapDashSectionArrow{
  margin-left:2px;
}
.teeTapDashSectionGroup{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:8px;
}
.teeTapDashSectionGroup[hidden]{
  display:none;
}
.teeDashTypeCategory > .paramStack{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.teeDashQuickControl{
  display:flex;
  align-items:center;
  gap:8px;
}
.teeDashQuickControl > input[type="range"]{
  flex:1 1 auto;
  min-width:140px;
  width:100%;
}
.teeDashPrimary.is-dash-disabled .teeDashQuickRow,
.teeDashPrimary.is-dash-disabled ~ .teeDashTypeCategory .teeDashQuickRow{
  opacity:.5;
}
.teeDashPrimary.is-dash-disabled .teeDashQuickControl > input[type="range"],
.teeDashPrimary.is-dash-disabled ~ .teeDashTypeCategory .teeDashQuickControl > input[type="range"]{
  cursor:not-allowed;
  filter:grayscale(1);
}
.teeDashPrimary.is-dash-disabled .teeDashQuickControl .chip,
.teeDashPrimary.is-dash-disabled ~ .teeDashTypeCategory .teeDashQuickControl .chip{
  color:var(--muted);
  border-color:var(--border);
  background:rgba(255,255,255,.04);
}
@media (max-width: 980px){
  .teeSkinSimpleCustomizerItem{
    --tee-marking-grid-rows:7;
    --tee-marking-slot-height:60px;
    --tee-marking-preview-width:90px;
  }
  .teeSkinDotPage--editor{
    grid-template-columns:1fr;
  }
  .teeSkinPreviewModes{
    grid-template-columns:1fr;
  }
  .teeSkinPreviewModeBox{
    grid-template-columns:78px minmax(0, 1fr);
  }
  .teeSkinPartTabs{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .teeSkinPartPanel .paramRow{
    grid-template-columns:1fr;
  }
  .teeSkinPartPanel .paramControl--skinColor{
    min-width:0;
  }
  .teeSkinPartPanel .skinColorSlider{
    flex:1 1 auto;
    min-width:92px;
  }
  .teeSkinSimpleColorGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .teeSkinSimpleTabs{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .teeSkinVisualPickerGrid--part{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .teeDashPrimary > .paramStack{
    grid-template-columns:1fr;
  }
  .teeMotionGrid{
    grid-template-columns:1fr;
  }
  .teeMotionGrid .menu-item:nth-child(3){
    grid-column:auto;
  }
}
@container (min-width: 440px){
  .teePanel .paramStack{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.badge{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.divider{
  height:1px;
  background:var(--border);
  margin:8px 0;
  opacity:.6;
}
body.debug.debug-stack .stack{outline:2px solid #00d1ff}
body.debug.debug-menu-option .menu-option{outline:2px solid #7c5cff}
body.debug.debug-menu-body .menu-option .menu-body{outline:2px dashed #00e676}
body.debug.debug-menu-list .menu-list{outline:2px solid #ffb300}
body.debug.debug-menu-list-body .menu-list-body{outline:2px dashed #ff5c8a}
body.debug.debug-menu-item .menu-item{outline:2px solid #a0ff4f}
body.debug.debug-tabs-area .tabsArea{outline:2px solid #ff2a2a}
body.debug.debug-tabs-body .tabsBody{outline:2px solid #3ad6ff}
body.debug.debug-tabs-header .tabsHeader{outline:2px solid #ff7a00}