.gs-root{max-width:1400px;
  margin:0 auto;
  padding:20px 24px 48px;
  min-height:65vh}
.gs-root:focus{outline:none}
.gs-root [hidden],.gs-dialog [hidden]{display:none!important}
.gs-root button,.gs-dialog button{cursor:pointer}
.gs-root h1,.gs-root h2,.gs-dialog h2{font-family:'CookieRun KR',sans-serif;
  line-height:1.18}
.gs-root h1{font-size:clamp(28px,4vw,44px);
  margin:12px 0}
.gs-root h2{font-size:24px}
.gs-root p{line-height:1.6}
.gs-muted{color:var(--th-ink-3)}
.gs-toolbar,.gs-actions,.gs-tabs,.gs-reader-actions{display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap}
.gs-toolbar{justify-content:space-between;
  margin-bottom:16px}
.gs-toolbar h1{font-size:26px}
.gs-toolbar p{margin:4px 0}
.gs-actions{gap:8px}
/* The library (2026-11-07, owner: less empty space, smaller cards). A
   compact header, the tabs and filters on one row, and a grid of small cards
   whose column count is stated per width (6 / 5 / 4 / 3 / 2), so a library of
   two creations draws two small cards rather than two stretched across. */
.gs-hero{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  align-items:center;
  gap:16px;
  border:1px solid var(--th-line);
  border-radius:var(--th-radius,20px);
  background:var(--th-surface-1);
  overflow:hidden;
  padding:20px 26px;
  position:relative}
.gs-hero-copy{position:relative;
  z-index:1;
  min-width:0}
.gs-root .gs-hero h1{font-size:clamp(26px,3vw,36px);
  margin:6px 0 4px}
.gs-hero-copy>p{max-width:62ch;
  margin:0 0 14px;
  color:var(--th-ink-3);
  font-size:16px;
  line-height:1.5}
/* The hero's button and, beside it, the full guide builder's place: a dashed
   Coming soon placeholder until it is released (studio.js guideBuilderSlot). */
.gs-hero-actions{display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px}
.gs-soon-slot{display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0;
  padding:6px 10px 6px 9px;
  border:1px dashed var(--th-line-3);
  border-radius:14px;
  color:var(--th-ink-3)}
.gs-soon-icon{flex:none;
  width:22px;
  height:22px}
.gs-soon-txt{display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.25}
.gs-soon-txt b{font-size:14px;
  font-weight:700;
  color:var(--th-ink-2)}
.gs-soon-txt span{font-size:12px}
.gs-hero-art{position:relative;
  align-self:stretch;
  min-height:120px}
.gs-hero-art img{position:absolute;
  top:-14px;
  left:0;
  width:100%;
  height:calc(100% + 28px);
  object-fit:contain;
  filter:drop-shadow(0 12px 26px #0004)}
.gs-bar{display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin:14px 0}
.gs-viewtabs{flex:none}
.gs-viewtabs button{height:34px;
  padding:0 16px;
  font-size:14px}
.gs-viewtabs button[aria-current]{color:var(--th-sel-ink);
  background:var(--th-sel-bg);
  box-shadow:var(--th-sel-shadow)}
.gs-filters{display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 520px;
  min-width:0}
.gs-find{position:relative;
  display:flex;
  align-items:center;
  flex:1 1 220px;
  max-width:340px;
  min-width:0}
.gs-root .gs-find svg{position:absolute;
  left:13px;
  width:16px;
  height:16px;
  color:var(--th-ink-3);
  pointer-events:none}
.gs-pick{flex:0 1 180px;
  min-width:0}
.gs-root .gs-filters :is(input,select){width:100%;
  height:38px;
  border-radius:999px;
  border-color:var(--th-line-2);
  background:var(--th-field-bg);
  font-size:14px}
.gs-root .gs-find input{padding:0 14px 0 38px}
.gs-root .gs-filters select{padding:0 10px 0 14px}
.gs-root .gs-filters :is(input,select):focus{outline:none;
  border-color:var(--th-focus-color);
  box-shadow:var(--th-focus-ring)}
.gs-tabs{border-bottom:1px solid var(--th-line);
  padding:20px 0;
  margin-bottom:24px}
.gs-tabs button{background:none;
  border:0;
  border-radius:8px;
  padding:10px 16px;
  font:inherit;
  color:var(--th-ink-3)}
.gs-tabs button[aria-current]{background:var(--th-gold-faint);
  color:var(--th-ink)}
.gs-toolbar label,.gs-fields label{display:grid;
  gap:6px;
  font-size:13px}
.gs-root input,.gs-root select,.gs-root textarea,.gs-dialog input,.gs-dialog select,.gs-dialog textarea{font:inherit;
  color:var(--th-ink);
  background:var(--th-surface-1);
  border:1px solid var(--th-line);
  border-radius:8px;
  padding:10px 12px;
  min-width:0;
  max-width:100%;
  box-sizing:border-box}
.gs-root input:focus,.gs-root textarea:focus,.gs-dialog input:focus{outline:2px solid var(--th-gold);
  outline-offset:2px}
.gs-search{flex:1;
  max-width:440px}
.gs-search input{width:100%}
.gs-grid{--gs-cols:6;
  display:grid;
  grid-template-columns:repeat(var(--gs-cols),minmax(0,1fr));
  gap:14px}
.gs-root .gs-grid-note{grid-column:1/-1;
  margin:6px 0;
  color:var(--th-ink-3)}
.gs-card{position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--th-line);
  border-radius:14px;
  background:var(--th-surface-1);
  transition:border-color .15s ease,background-color .15s ease}
.gs-card:hover{border-color:var(--th-line-3);
  background:var(--th-surface-2)}
.gs-card:has(.gs-card-more[open]){z-index:3}
.gs-card-art{position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  overflow:hidden;
  padding:8px;
  box-sizing:border-box;
  border-radius:13px 13px 0 0;
  background:radial-gradient(90% 85% at 50% 100%,rgba(var(--th-el),.3),rgba(var(--th-el),0) 72%),var(--th-surface-sunk)}
.gs-card-art>img{width:100%;
  height:100%;
  min-width:0;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.gs-card-art--icon>img{width:auto;
  height:74%;
  max-width:80%}
.gs-card-art>img.gs-img-missing{visibility:hidden}
.gs-root .gs-card-glyph{width:30%;
  height:auto;
  color:var(--th-ink-3);
  opacity:.6}
.gs-card-tag{position:absolute;
  top:6px;
  left:6px;
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--th-line-2);
  background:var(--th-glass);
  color:var(--th-ink-2);
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap}
.gs-card-body{display:grid;
  align-content:start;
  gap:3px;
  min-width:0;
  padding:9px 11px 11px}
.gs-root .gs-card-title{margin:0;
  font-size:15px;
  line-height:1.28;
  color:var(--th-heading)}
.gs-card-open{display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left}
.gs-card-open::after{content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:14px}
.gs-root .gs-card-open:focus-visible{outline:none}
.gs-card-open:focus-visible::after{outline:2px solid var(--th-focus-color);
  outline-offset:2px}
.gs-card-name{display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere}
.gs-root .gs-card-meta{display:flex;
  flex-wrap:nowrap;
  gap:5px;
  min-width:0;
  margin:0;
  font-size:12px;
  line-height:1.35;
  color:var(--th-ink-3)}
.gs-card-meta span{min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.gs-card-meta span:first-child{flex:none;
  max-width:100%}
.gs-card-meta span+span::before{content:"\00b7";
  margin-right:5px}
/* the other actions of a draft on this device, behind its menu button */
.gs-card-more{position:absolute;
  top:6px;
  right:6px;
  z-index:2}
.gs-card-more-btn{display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--th-line-2);
  background:var(--th-glass);
  color:var(--th-ink);
  cursor:pointer;
  list-style:none}
.gs-card-more-btn::-webkit-details-marker{display:none}
.gs-card-more-btn:hover,.gs-card-more[open] .gs-card-more-btn{background:var(--th-surface-3)}
.gs-card-more-btn:focus-visible{outline:2px solid var(--th-focus-color);
  outline-offset:2px}
.gs-root .gs-card-more-btn svg{width:18px;
  height:18px}
.gs-card-more-btn circle{fill:currentColor;
  stroke:none}
.gs-card-menu{position:absolute;
  top:calc(100% + 4px);
  right:0;
  display:grid;
  gap:2px;
  min-width:178px;
  padding:5px;
  border-radius:12px;
  border:1px solid var(--th-line-2);
  background:var(--th-surface-2);
  box-shadow:var(--th-shadow-2)}
.gs-menu-item{display:block;
  width:100%;
  padding:9px 11px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--th-ink);
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  text-align:left;
  white-space:nowrap}
.gs-menu-item:hover{background:var(--th-btn-hover)}
@container th (max-width:1149px){.gs-grid{--gs-cols:5}}
@container th (max-width:959px){.gs-grid{--gs-cols:4}
  .gs-filters{flex-basis:100%}
  .gs-find{max-width:none}}
@container th (max-width:699px){.gs-grid{--gs-cols:3;
    gap:10px}
  .gs-bar{gap:8px}
  .gs-viewtabs{display:flex;
    flex:1 1 100%}
  .gs-viewtabs button{flex:1;
    justify-content:center}
  .gs-filters{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-find{grid-column:1/-1}}
@container th (max-width:469px){.gs-grid{--gs-cols:2}}
.gs-empty,.gs-notice{border:1px solid var(--th-line);
  border-radius:14px;
  padding:22px;
  background:var(--th-surface-1)}
.gs-empty{grid-column:1/-1;
  text-align:center;
  padding:26px 20px}
.gs-root .gs-empty h2{font-size:20px;
  margin:0 0 4px}
.gs-root .gs-empty p{margin:0 0 12px}
.gs-notice{margin:16px 0}
.gs-notice[data-error=true]{border-color:#dc6464}
.gs-editor{display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start}
.gs-editor-tools{background:var(--th-surface-1);
  border:1px solid var(--th-line);
  border-radius:14px;
  padding:20px;
  min-width:0}
.gs-editor-tools .gs-fields{display:grid;
  gap:16px}
.gs-stage{border:1px solid var(--th-line);
  border-radius:16px;
  padding:22px;
  background:var(--th-surface-sunk);
  min-width:0}
.gs-stage-label{font-size:12px;
  color:var(--th-ink-3);
  margin:0 0 16px;
  display:flex;
  justify-content:space-between}
.gs-preview{max-width:560px;
  margin:auto;
  min-width:0}
.gs-preview[data-layout=wide]{max-width:850px}
.gs-guide-editor .gs-preview{max-width:820px}
.gs-guide-editor .gs-stage{background:transparent;
  padding:0;
  border:0}
.gs-mobile-tabs{display:none}
.gs-save-state{font-size:12px;
  color:var(--th-ink-3);
  max-width:44ch}
.gs-save-state[data-error=true]{color:#db6868}
.gs-editor-tools details{margin-top:20px;
  border-top:1px solid var(--th-line);
  padding-top:14px}
.gs-editor-tools summary{cursor:pointer;
  margin-bottom:12px}
.gs-reader{max-width:840px;
  margin:0 auto 24px}
.gs-reader.gs-graphic-reader{max-width:560px}
.gs-reader.gs-graphic-reader[data-layout=wide]{max-width:1080px}
.gs-reader-actions{justify-content:space-between;
  margin:0 0 14px}
.gs-finish{display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;
  align-items:start}
.gs-finish .gs-reader{width:100%;
  margin:0 auto}
.gs-finish-panel{position:sticky;
  top:calc(var(--th-sticky-top,100px) + 16px);
  display:grid;
  gap:12px;
  padding:22px;
  border:1px solid var(--th-line);
  border-radius:14px;
  background:var(--th-surface-1)}
.gs-finish-panel h2,.gs-finish-panel p{margin:0}
.gs-finish-panel .th-btn{justify-content:center}
.gs-status{position:fixed;
  container-type:normal;
  pointer-events:none;
  z-index:2200;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(600px,calc(100vw - 36px));
  padding:14px 20px;
  border:1px solid var(--th-line);
  border-radius:12px;
  background:var(--th-surface-1);
  color:var(--th-ink);
  box-shadow:0 10px 40px #0004;
  font-size:14px}
.gs-dialog{width:min(650px,calc(100vw - 32px));
  position:fixed;
  inset:auto;
  margin:0;
  max-width:none;
  max-height:85dvh;
  box-sizing:border-box;
  overflow:auto;
  overscroll-behavior:contain;
  padding:28px;
  border:1px solid var(--th-line);
  border-radius:18px;
  background:var(--th-surface-1);
  color:var(--th-ink)}
.gs-dialog::backdrop{background:#0009}
.gs-dialog-head{display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px}
.gs-dialog-head h2{margin:0 0 18px}
.gs-dialog .gs-fields{display:grid;
  gap:14px;
  margin:12px 0 24px}
.gs-picker-results{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:18px}
.gs-cookie-option{display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  border:1px solid var(--th-line);
  border-radius:10px;
  padding:10px;
  background:var(--th-surface-sunk);
  color:var(--th-ink);
  font:inherit;
  min-height:64px;
  min-width:0}
.gs-cookie-option img{width:44px;
  height:44px;
  object-fit:contain}
.gs-cookie-option span{overflow-wrap:anywhere}
.gs-cookie-option small{display:block;
  color:var(--th-ink-3)}
.gs-equipment-options{display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:8px 0 20px}
.gs-equipment-options .gs-cookie-option{flex-direction:column;
  justify-content:center;
  text-align:center;
  min-height:116px;
  gap:8px;
  padding:8px;
  font-size:12px;
  line-height:1.35}
.gs-equipment-options .gs-cookie-option img{width:56px;height:56px}
.gs-equipment-options .gs-cookie-option:hover,.gs-equipment-options .gs-cookie-option[aria-pressed=true]{border-color:var(--th-gold);
  background:var(--th-gold-faint)}
.gs-beascuit-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.gs-beascuit-types{grid-template-columns:repeat(4,minmax(0,1fr))}
.gs-beascuit-types .gs-cookie-option img{width:64px;height:64px}
.gs-beascuit-tiers{margin:16px 0}
.gs-beascuit-tiers [aria-pressed=true]{border-color:var(--th-gold);background:var(--th-gold-faint);color:var(--th-gold)}
.gs-beascuit-options .gs-cookie-option img{width:80px;height:80px}
@media(max-width:550px){.gs-equipment-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .gs-beascuit-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gs-help{font-size:13px;
  color:var(--th-ink-3);
  margin-top:16px}
.gs-loading{padding:50px 0}
.gs-source{margin:20px 0;
  padding:16px;
  border-top:1px solid var(--th-line);
  overflow-wrap:anywhere}
.gs-inline-error{color:#d65d5d}
.gs-root a:focus-visible,.gs-root button:focus-visible,.gs-dialog button:focus-visible{outline:2px solid var(--th-gold);
  outline-offset:3px}
.gs-root .th-btn{min-height:42px}
.gs-export-host{padding:0;
  position:fixed;
  left:-20000px;
  top:0;
  pointer-events:none;
  z-index:-1;
  width:900px}
.gs-export-host .gs-preview{max-width:none;
  width:100%}

@media(max-width:1000px){.gs-root{padding:18px 20px 44px}
.gs-editor{grid-template-columns:270px minmax(0,1fr);
  gap:16px}
.gs-stage{padding:16px}
.gs-finish{grid-template-columns:minmax(0,1fr) 250px}
.gs-hero{grid-template-columns:minmax(0,1fr) minmax(0,220px)}
}

@media(max-width:700px){.gs-root{padding:14px 16px 40px}
.gs-hero{padding:16px 18px;
  grid-template-columns:1fr}
.gs-hero-copy>p{font-size:15px;
  margin-bottom:12px}
.gs-hero-art{display:none}
/* the placeholder keeps its name and tag; the first card stays on the first screen */
.gs-soon-txt span{display:none}
.gs-toolbar{align-items:flex-start;
  gap:12px}
.gs-toolbar h1{font-size:23px}
.gs-editor{display:block}
.gs-editor-tools{padding:18px}
.gs-stage{padding:14px}
.gs-mobile-tabs{display:flex;
  margin:0 0 18px;
  border-bottom:0;
  padding:0}
.gs-mobile-tabs button{flex:1;
  min-height:44px;
  background:var(--th-surface-1)}
.gs-editor[data-tab=edit]:not(.gs-guide-editor) .gs-stage{display:none}
.gs-editor[data-tab=preview] .gs-editor-tools{display:none}
.gs-editor[data-tab=preview] .gs-stage{display:block}
.gs-guide-editor .gs-editor-tools{margin-bottom:18px}
.gs-guide-editor .gs-stage{padding:0}
.gs-finish{display:flex;
  flex-direction:column-reverse;
  gap:20px}
.gs-finish-panel{position:static;
  width:100%;
  box-sizing:border-box}
.gs-picker-results{grid-template-columns:1fr}
.gs-dialog{padding:22px}
.gs-tabs{gap:6px}
.gs-tabs button{padding:10px 12px}
.gs-actions .th-btn{font-size:13px}
.gs-reader-actions{align-items:flex-start}
.gs-status{bottom:18px}
.gs-help{font-size:12px}
.gs-editor-tools details{margin-top:12px}
.gs-search{max-width:none;
  flex-basis:100%}
}

@media(prefers-reduced-motion:reduce){.gs-root *{scroll-behavior:auto!important}
}


.gs-editor-tools #studioGuideTools{margin:0;
  padding:0;
  border:0}
.gs-editor-tools #studioGuideTools>summary{font-weight:700;
  min-height:28px}
.gs-guide-editor[data-tab=edit] .gd-page-heading{display:none}
@media(min-width:701px){.gs-editor-tools #studioGuideTools>summary{display:none}
}


.gs-asset-option img{width:64px;
  height:64px;
  object-fit:contain}
.gs-asset-option{min-height:90px}
.gs-picker-count{font-size:12px;
  color:var(--th-ink-3)}


.gs-sr-only{position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}


.gs-root h1,.gs-root h2{overflow-wrap:anywhere}
.gs-toolbar>div{min-width:0;
  max-width:100%}


.gs-category-field{display:grid;gap:6px;font-size:13px}.gs-publication-review{margin:20px 0;max-width:100%}.gs-dialog .gs-actions .th-btn{white-space:normal;height:auto;min-height:42px;padding-block:10px}.gs-export-content{width:100%;padding:0}