/* Pinned Maru Buri webfont shared by Canvas and Market editorial banners.
   The existing CSP permits these immutable font binaries; the rest of the UI remains SUIT. */
@font-face{
  font-family:"Maru Buri";
  src:url("https://cdn.jsdelivr.net/gh/fonts-archive/MaruBuri@977eeff68d1d40bcef341f09c1f56cce1903bb8a/MaruBuri-Regular.woff2") format("woff2");
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Maru Buri";
  src:url("https://cdn.jsdelivr.net/gh/fonts-archive/MaruBuri@977eeff68d1d40bcef341f09c1f56cce1903bb8a/MaruBuri-SemiBold.woff2") format("woff2");
  font-style:normal;font-weight:600;font-display:swap;
}

/* Locrian screen UI typography — SUIT Variable is the single source of truth.
   Deliberately exclude authored Canvas element fonts, font-picker previews,
   music/symbol glyphs, worksheet SVG content, print and PDF output. */
:root {
  --locrian-ui-font: "SUIT Variable","SUIT","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* Single SSOT for the production-only screen font uplift (2pt, not 5pt). */
  --locrian-ui-font-size-offset: 2pt;
  /* Lower explicitly emphasized screen UI weights by 50, preserving regular 400. */
  --locrian-ui-font-weight-offset: 50;
  --sans: var(--locrian-ui-font);
  --serif: var(--locrian-ui-font);
  --locrian-ui-body-size: 16px;
  --locrian-ui-control-size: 15px;
  --locrian-ui-secondary-size: 14px;
  --locrian-ui-caption-size: 13px;
  --locrian-ui-heading-weight: 550;
  --locrian-ui-control-weight: 450;
  font-family: var(--locrian-ui-font);
}
@media screen {
  body,.site-header,.maker-app,.generator-nav,.generator-credit-shortage-card,.console,.layout {
    font-family:var(--locrian-ui-font)!important;
  }
  body {font-size:var(--locrian-ui-body-size);line-height:1.65;font-weight:400;letter-spacing:-.012em}
  :is(button,input,select,textarea,option,dialog) {font-family:var(--locrian-ui-font)}
  :is(h1,h2,h3,h4,h5,h6) {font-weight:var(--locrian-ui-heading-weight)!important}
  :is(strong,b) {font-weight:var(--locrian-ui-heading-weight)!important}

  /* Header's three tabs alone are 1pt smaller than the globally enlarged UI.
     The web build still applies the shared +2pt overlay to both calc() values. */
  /* Shared navigation, profile and confirmation dialogs */
  .site-header nav>a,.site-header nav>.nav-group>button {
    font-size:calc(15px - 1pt)!important;font-weight:500!important;line-height:1.45;
  }
  .site-header :is(.market-account-nickname,.account-summary,.account-actions,.market-account-dropdown a,.market-account-dropdown button),
  .site-header .market-header-search input {font-size:14px!important;font-weight:450!important}
  .site-header :is(.market-account-wallet .account-credit strong,.market-account-profile .market-account-nickname) {
    font-weight:550!important;
  }
  .locrian-confirm-brand {font-size:13px;font-weight:500}
  .locrian-confirm-message,.locrian-confirm-details {font-size:15px;line-height:1.7}
  .locrian-confirm-actions button {font-size:15px;font-weight:500}
  :is(.site-footer,.footer-cluster) {font-size:13px}

  /* Home, account and legal document UI */
  .page-view>p,.page-view .legal-document,.account-withdrawal p {
    font-size:16px;line-height:1.75;
  }
  .page-view :is(.profile-field>span,.mypage-menu a,.mypage-menu-action,.mypage-identity-copy small,.mypage-table th,.profile-info-note,.profile-avatar-controls small) {
    font-size:14px;
  }
  .page-view :is(.mypage-table td,.profile-academy-current,.mypage-identity-copy span,.mypage-credit-summary>span,.mypage-credit-link) {
    font-size:15px;
  }
  .page-view :is(button,label,summary,.mypage-menu a,.mypage-menu-action) {font-weight:500!important}
  .page-view :is(.profile-info-card>h3,.mypage-identity-copy strong) {font-weight:600!important}
  .page-view :is(.profile-inline-action,.profile-card-form input,.profile-card-form button) {font-size:15px}
  .market-section .section-kicker,.products-section .section-kicker {font-size:14px}

  /* Marketplace tiles, taxonomy, quick filters, details and creator upload */
  .market-page :is(.market-resource-title,.market-catalog-card .market-resource-title) {
    font-size:16px;font-weight:550!important;line-height:1.5;
  }
  .market-page :is(.market-resource-creator,.market-catalog-card .market-resource-creator,
    .market-resource-meta,.market-catalog-meta,.market-catalog-label,.market-demo-note,
    .market-catalog-rating,.market-demo-badge,.market-filter>span) {
    font-size:14px;font-weight:450!important;
  }
  .market-page :is(.market-category-button,.market-category-panel a,.market-sort,
    .market-filter select,.market-body-search input) {
    font-size:15px!important;font-weight:500!important;
  }
  .market-page :is(.market-resource-meta strong,.market-page-title,.resource-creator-link) {
    font-weight:550!important;
  }
  .market-page :is(.resource-description p,.resource-review p,.market-empty p) {
    font-size:15px;line-height:1.75;
  }
  .market-page :is(.resource-purchase-note,.resource-tags a,.resource-review small,
    .market-catalog-error,.market-section-title p) {
    font-size:13px;
  }
  :is(.market-page,.creator-page) :is(input,textarea,select,button,label,summary) {
    font-weight:500;
  }
  :is(.market-page,.creator-page) :is(input:not([type="checkbox"]):not([type="radio"]),
    textarea,select) {font-size:15px}
  :is(.market-page,.creator-page) :is(.creator-category-trail,.creator-draft-delete) {
    font-size:14px;
  }
  .creator-page :is(label,small,.creator-drop-filename,.creator-upload-field,.creator-upload-note) {
    font-weight:450;
  }

  /* Canvas chrome only: never change sheet elements or font choice previews. */
  .maker-app :is(.maker-back-link,.maker-context-hint,.maker-context-title,.maker-setting-label,
    .maker-input,.maker-context-select,.maker-context-number,.maker-pages .maker-page-thumb,
    .maker-page-actions button,.maker-zoom-label,.maker-bar input,.maker-bar button) {
    font-size:14px;
  }
  .maker-app :is(.maker-status,.maker-opacity-value,.maker-template-desc,.maker-field,.maker-check,
    .maker-thumb-index,.maker-cloud-confirm span) {font-size:13px}
  .maker-app .maker-rail-title {font-size:16px;font-weight:550}
  .maker-app :is(.maker-setting-label,.maker-page-actions button,.maker-bar button,
    .maker-context-title,.maker-side h2,.maker-side button) {font-weight:500}
  .maker-app :is(.maker-side p,.maker-side button,.maker-side h2) {font-size:14px}
  .maker-app :is(.maker-command-bar .maker-toolbar-media,
    .maker-command-bar>button:not(.maker-tool)) {font-size:13px;font-weight:500}

  /* Generator controls only; original worksheet/print type remains unchanged. */
  .app .controls :is(label,summary,select,input,button) {
    font-family:var(--locrian-ui-font);font-size:15px;font-weight:500;
  }
  .app .controls :is(small,.hint) {font-size:13px;font-weight:400}
  .app .controls .brand h1 {
    font-family:var(--locrian-ui-font)!important;font-weight:600!important;
  }
  /* Higher specificity than the generator's runtime-injected 30px/600 rules.
     Build overlay changes this UI heading from 600 to 550. */
  html body .app .controls .brand h1 {font-size:30px!important;font-weight:600!important}
  .generator-nav,.generator-credit-shortage-row {font-size:15px}
  .layout :is(.description,form label,.results li) {font-size:15px}
  .layout :is(button,form label) {font-weight:500}

  /* Administrator console and data tables */
  .console :is(.console-subtitle,.nav-label,.crumb,.operator-tag) {
    font-size:13px;font-weight:500;letter-spacing:.04em;
  }
  .console :is(button,label,select,input,.console-nav .nav-button) {
    font-size:14px;font-weight:500;
  }
  .console :is(.data-table,.data-table th,.data-table td,.data-grid dt,.data-grid dd,
    .member-details span,.info-strip,.metric small,.metric span,.review-description,
    .file-review-row,.admin-inline-form label) {font-size:14px}
  .console :is(.data-grid dt,.data-table th,.data-table .resource-title) {
    font-weight:500;
  }
}
@media screen and (max-width:680px) {
  .site-header nav>a,.site-header nav>.nav-group>button {font-size:calc(14px - 1pt)!important}
  .site-header :is(.market-account-nickname,.account-summary,.account-actions) {
    font-size:13px!important;
  }
  .page-view :is(.profile-field>span,.mypage-identity-copy small) {font-size:13px}
}

/* §248: one restrained UI weight across both worksheet generators.
   Scope to interactive chrome/settings only; don't touch page DOM, SVG,
   authored worksheet text, server PDF or print. The old §247 650-weight
   blanket style unintentionally thickened setting labels and choices. */
@media screen {
  :root{--locrian-generator-ui-weight:500}
  html body .app :is(.controls,.preview-toolbar,.page-list) :is(
    button,label,small,span,strong,b,h1,h2,h3,p,a,summary,input,select,option,
    legend,.field,.hint,.setting-heading,.setting-group-body,.check-list,.radio-list,
    .clef-card-label,.row-range-effective,.pitch-range-labels
  ),
  html body .generator-nav :is(a,button,span,strong),
  html body .generator-credit-shortage-card :is(button,label,span,strong),
  /* Stronger than the generated +2pt/-50 weight overlay, which appends
     the older html body .app .controls .brand h1 {font-weight:550!important}
     after this source stylesheet during the web build. */
  html body.tool-page .app .controls .brand h1 {
    font-weight:var(--locrian-generator-ui-weight)!important;
  }
}

/* §248: one actual reusable Market '닫기' button skin (white / Steel Blue).
   Add the class to generator actions and owned-product actions instead of
   copying ad-hoc per-page rules. Preserve their existing click handlers.
   The category Close itself consumes the exact same class. */
@media screen {
  html body :is(
    #page-view.market-page .market-mega-header-actions,
    #page-view.market-page .creator-owned-detail-actions,
    #page-view .price-grid,
    .app .controls,
    .app .page-list
  ) .locrian-category-close-action {
    box-sizing:border-box!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:42px!important;padding:9px 15px!important;gap:7px!important;
    border:1px solid var(--locrian-tab-selected,#61758A)!important;
    border-radius:5px!important;
    background-color:#fff!important;background-image:none!important;
    background-size:auto!important;
    color:var(--locrian-tab-selected,#61758A)!important;
    -webkit-text-fill-color:currentColor!important;
    font-family:var(--locrian-ui-font,SUIT,system-ui,sans-serif)!important;
    font-weight:var(--locrian-generator-ui-weight,500)!important;
    line-height:1.35!important;text-align:center!important;text-decoration:none!important;
    box-shadow:none!important;transform:none!important;filter:none!important;
    cursor:pointer!important;white-space:nowrap!important;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease!important;
  }
  html body :is(
    #page-view.market-page .market-mega-header-actions,
    #page-view.market-page .creator-owned-detail-actions,
    #page-view .price-grid,
    .app .controls,
    .app .page-list
  ) .locrian-category-close-action:is(:hover,:focus-visible) {
    background-color:var(--locrian-tab-selected,#61758A)!important;
    border-color:var(--locrian-tab-selected,#61758A)!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
  }
  html body :is(
    #page-view.market-page .market-mega-header-actions,
    #page-view.market-page .creator-owned-detail-actions,
    #page-view .price-grid,
    .app .controls,
    .app .page-list
  ) .locrian-category-close-action::before,
  html body :is(
    #page-view.market-page .market-mega-header-actions,
    #page-view.market-page .creator-owned-detail-actions,
    #page-view .price-grid,
    .app .controls,
    .app .page-list
  ) .locrian-category-close-action::after {
    content:none!important;display:none!important;animation:none!important;transition:none!important;
  }
  html body .locrian-category-close-action > :is(span,strong,.locrian-edge-ink){
    background:none!important;background-image:none!important;
    color:inherit!important;-webkit-text-fill-color:currentColor!important;
    mix-blend-mode:normal!important;text-shadow:none!important;
  }
  /* HTML hidden is semantic state, never unhide a preset edit action merely
     because the shared Close skin needs inline-flex in its visible state. */
  html body :is(
    #page-view.market-page .market-mega-header-actions,
    #page-view.market-page .creator-owned-detail-actions,
    #page-view .price-grid,
    .app .controls,
    .app .page-list
  ) .locrian-category-close-action[hidden]{display:none!important}
  html body .locrian-category-close-action:disabled{opacity:.55!important;cursor:not-allowed!important}
  html body .locrian-category-close-action:focus-visible{
    outline:2px solid var(--locrian-tab-selected,#61758A)!important;outline-offset:3px!important;
  }
}
@media screen and (prefers-reduced-motion:reduce){
  html body .locrian-category-close-action{transition:none!important;animation:none!important}
}

/* Locrian generated screen UI font-size uplift; do not edit. */
@media screen {
@media screen{body{font-size:calc(var(--locrian-ui-body-size) + 2pt)}}
@media screen{.site-header nav>a,.site-header nav>.nav-group>button{font-size:calc(calc(15px - 1pt) + 2pt)!important}}
@media screen{.site-header nav>a,.site-header nav>.nav-group>button{font-weight:450!important}}
@media screen{.site-header :is(.market-account-nickname,.account-summary,.account-actions,.market-account-dropdown a,.market-account-dropdown button),
  .site-header .market-header-search input{font-size:calc(14px + 2pt)!important}}
@media screen{.site-header :is(.market-account-nickname,.account-summary,.account-actions,.market-account-dropdown a,.market-account-dropdown button),
  .site-header .market-header-search input{font-weight:400!important}}
@media screen{.site-header :is(.market-account-wallet .account-credit strong,.market-account-profile .market-account-nickname){font-weight:500!important}}
@media screen{.locrian-confirm-brand{font-size:calc(13px + 2pt)}}
@media screen{.locrian-confirm-brand{font-weight:450}}
@media screen{.locrian-confirm-message,.locrian-confirm-details{font-size:calc(15px + 2pt)}}
@media screen{.locrian-confirm-actions button{font-size:calc(15px + 2pt)}}
@media screen{.locrian-confirm-actions button{font-weight:450}}
@media screen{:is(.site-footer,.footer-cluster){font-size:calc(13px + 2pt)}}
@media screen{.page-view>p,.page-view .legal-document,.account-withdrawal p{font-size:calc(16px + 2pt)}}
@media screen{.page-view :is(.profile-field>span,.mypage-menu a,.mypage-menu-action,.mypage-identity-copy small,.mypage-table th,.profile-info-note,.profile-avatar-controls small){font-size:calc(14px + 2pt)}}
@media screen{.page-view :is(.mypage-table td,.profile-academy-current,.mypage-identity-copy span,.mypage-credit-summary>span,.mypage-credit-link){font-size:calc(15px + 2pt)}}
@media screen{.page-view :is(button,label,summary,.mypage-menu a,.mypage-menu-action){font-weight:450!important}}
@media screen{.page-view :is(.profile-info-card>h3,.mypage-identity-copy strong){font-weight:550!important}}
@media screen{.page-view :is(.profile-inline-action,.profile-card-form input,.profile-card-form button){font-size:calc(15px + 2pt)}}
@media screen{.market-section .section-kicker,.products-section .section-kicker{font-size:calc(14px + 2pt)}}
@media screen{.market-page :is(.market-resource-title,.market-catalog-card .market-resource-title){font-size:calc(16px + 2pt)}}
@media screen{.market-page :is(.market-resource-title,.market-catalog-card .market-resource-title){font-weight:500!important}}
@media screen{.market-page :is(.market-resource-creator,.market-catalog-card .market-resource-creator,
    .market-resource-meta,.market-catalog-meta,.market-catalog-label,.market-demo-note,
    .market-catalog-rating,.market-demo-badge,.market-filter>span){font-size:calc(14px + 2pt)}}
@media screen{.market-page :is(.market-resource-creator,.market-catalog-card .market-resource-creator,
    .market-resource-meta,.market-catalog-meta,.market-catalog-label,.market-demo-note,
    .market-catalog-rating,.market-demo-badge,.market-filter>span){font-weight:400!important}}
@media screen{.market-page :is(.market-category-button,.market-category-panel a,.market-sort,
    .market-filter select,.market-body-search input){font-size:calc(15px + 2pt)!important}}
@media screen{.market-page :is(.market-category-button,.market-category-panel a,.market-sort,
    .market-filter select,.market-body-search input){font-weight:450!important}}
@media screen{.market-page :is(.market-resource-meta strong,.market-page-title,.resource-creator-link){font-weight:500!important}}
@media screen{.market-page :is(.resource-description p,.resource-review p,.market-empty p){font-size:calc(15px + 2pt)}}
@media screen{.market-page :is(.resource-purchase-note,.resource-tags a,.resource-review small,
    .market-catalog-error,.market-section-title p){font-size:calc(13px + 2pt)}}
@media screen{:is(.market-page,.creator-page) :is(input,textarea,select,button,label,summary){font-weight:450}}
@media screen{:is(.market-page,.creator-page) :is(input:not([type="checkbox"]):not([type="radio"]),
    textarea,select){font-size:calc(15px + 2pt)}}
@media screen{:is(.market-page,.creator-page) :is(.creator-category-trail,.creator-draft-delete){font-size:calc(14px + 2pt)}}
@media screen{.creator-page :is(label,small,.creator-drop-filename,.creator-upload-field,.creator-upload-note){font-weight:400}}
@media screen{.maker-app :is(.maker-back-link,.maker-context-hint,.maker-context-title,.maker-setting-label,
    .maker-input,.maker-context-select,.maker-context-number,.maker-pages .maker-page-thumb,
    .maker-page-actions button,.maker-zoom-label,.maker-bar input,.maker-bar button){font-size:calc(14px + 2pt)}}
@media screen{.maker-app :is(.maker-status,.maker-opacity-value,.maker-template-desc,.maker-field,.maker-check,
    .maker-thumb-index,.maker-cloud-confirm span){font-size:calc(13px + 2pt)}}
@media screen{.maker-app .maker-rail-title{font-size:calc(16px + 2pt)}}
@media screen{.maker-app .maker-rail-title{font-weight:500}}
@media screen{.maker-app :is(.maker-setting-label,.maker-page-actions button,.maker-bar button,
    .maker-context-title,.maker-side h2,.maker-side button){font-weight:450}}
@media screen{.maker-app :is(.maker-side p,.maker-side button,.maker-side h2){font-size:calc(14px + 2pt)}}
@media screen{.maker-app :is(.maker-command-bar .maker-toolbar-media,
    .maker-command-bar>button:not(.maker-tool)){font-size:calc(13px + 2pt)}}
@media screen{.maker-app :is(.maker-command-bar .maker-toolbar-media,
    .maker-command-bar>button:not(.maker-tool)){font-weight:450}}
@media screen{.app .controls :is(label,summary,select,input,button){font-size:calc(15px + 2pt)}}
@media screen{.app .controls :is(label,summary,select,input,button){font-weight:450}}
@media screen{.app .controls :is(small,.hint){font-size:calc(13px + 2pt)}}
@media screen{.app .controls .brand h1{font-weight:550!important}}
@media screen{html body .app .controls .brand h1{font-size:calc(30px + 2pt)!important}}
@media screen{html body .app .controls .brand h1{font-weight:550!important}}
@media screen{.generator-nav,.generator-credit-shortage-row{font-size:calc(15px + 2pt)}}
@media screen{.layout :is(.description,form label,.results li){font-size:calc(15px + 2pt)}}
@media screen{.layout :is(button,form label){font-weight:450}}
@media screen{.console :is(.console-subtitle,.nav-label,.crumb,.operator-tag){font-size:calc(13px + 2pt)}}
@media screen{.console :is(.console-subtitle,.nav-label,.crumb,.operator-tag){font-weight:450}}
@media screen{.console :is(button,label,select,input,.console-nav .nav-button){font-size:calc(14px + 2pt)}}
@media screen{.console :is(button,label,select,input,.console-nav .nav-button){font-weight:450}}
@media screen{.console :is(.data-table,.data-table th,.data-table td,.data-grid dt,.data-grid dd,
    .member-details span,.info-strip,.metric small,.metric span,.review-description,
    .file-review-row,.admin-inline-form label){font-size:calc(14px + 2pt)}}
@media screen{.console :is(.data-grid dt,.data-table th,.data-table .resource-title){font-weight:450}}
@media screen and (max-width:680px){.site-header nav>a,.site-header nav>.nav-group>button{font-size:calc(calc(14px - 1pt) + 2pt)!important}}
@media screen and (max-width:680px){.site-header :is(.market-account-nickname,.account-summary,.account-actions){font-size:calc(13px + 2pt)!important}}
@media screen and (max-width:680px){.page-view :is(.profile-field>span,.mypage-identity-copy small){font-size:calc(13px + 2pt)}}
}