/* Compact workbench shared by the standalone studio and the homepage section. */
select { font: inherit; color: var(--ink); }
select:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.site-header, #studio-view { max-width: 1360px; padding-inline: 36px; }
.site-header { height: 78px; }
.brand-name { font-size: 23px; font-weight: 400; }
.site-header nav { margin-left: 0; }
.intro { padding: 26px 0; gap: 20px; }
.intro h1 { font-size: 36px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; }
.intro p { font-size: 14px; line-height: 1.6; }
#embed-help { display: none; }
.workbench { grid-template-columns: 204px minmax(0, 1fr) 214px; gap: 22px; padding-top: 22px; }
.panel-heading { flex-wrap: wrap; }
.panel-heading h2 { font-size: 17px; font-weight: 400; }
.pattern-panel .panel-heading { display: block; }
.pattern-panel .tiny-label { display: block; font-size: 12px; margin-top: 5px; }
.pattern-filters { display: block; position: static; margin: 14px 0; }
.pattern-filters select { width: 100%; min-height: 42px; padding: 9px 26px 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 13px; cursor: pointer; }
.level-description { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.pattern-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 0; overflow: visible; }
.pattern-card { display: block; }
.pattern-thumb { min-height: 0; background: #eeebe2; }
.pattern-title { font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1.4; min-height: 2.8em; white-space: normal; margin-top: 7px; }
.pattern-level { font-size: 11px; line-height: 1.45; margin-top: 3px; }
.pattern-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.pattern-pagination #page-status { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pattern-pagination .icon-button, .history-actions .icon-button { width: 36px; height: 36px; }
#previous-patterns svg { transform: rotate(180deg); }
.paper-colors { margin-top: 16px; padding-top: 14px; }
#colors { margin-top: 14px; gap: 20px; }
.paper-colors > span { font-size: 12px; }
.panel-footnote { display: none; }
.cutting-panel { padding-inline: 22px; }
.canvas-heading { min-height: 55px; padding-bottom: 12px; }
.canvas-heading > div:first-child { display: block; }
.canvas-heading h2 { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.canvas-heading #current-fold { display: block; font-size: 12px; margin-top: 4px; }
.method-guide { margin: 0 0 12px; }
.method-guide > p { font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 68ch; }
.method-guide ol { display: flex; flex-wrap: wrap; gap: 7px 18px; list-style: none; padding: 0; margin: 8px 0 0; font-size: 11px; color: var(--muted); counter-reset: method; }
.method-guide li::before { counter-increment: method; content: counter(method) ". "; }
.method-guide li.current { color: var(--red); font-weight: 600; }
.preparation-dock { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); }
.preparation-dock .primary-button { min-height: 48px; font-size: 13px; }
.preparation-dock[hidden], .tool-dock[hidden], .method-guide[hidden] { display: none; }
.help-current-method { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; color: var(--jade); line-height: 1.6; }
#folded-paper.folding { animation: paper-fold .45s ease-out; transform-origin: 0 0; }
@keyframes paper-fold { from { opacity: .5; transform: scaleX(.65); } to { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { #folded-paper.folding { animation: none; } }
.cutting-mat { height: 366px; min-height: 0; aspect-ratio: auto; }
#cutting-svg { top: 28px; height: calc(100% - 117px); }
.step-caption { top: 17px; left: 20px; right: 14px; font-size: 12px; line-height: 1.4; }
.fold-label { bottom: 88px; font-size: 11px; }
.tool-dock { bottom: 18px; }
.tool { min-width: 54px; height: 53px; }
.tool span { font-size: 11px; }
.canvas-controls { min-height: 46px; gap: 6px; }
.canvas-controls { flex-wrap: wrap; }
#focus-cut { color: var(--jade); }
.step-caption, .fold-label { background: var(--paper); color: var(--muted); padding: 4px 6px; border-radius: 3px; }
.step-caption { max-width: calc(100% - 36px); }
.fold-label { width: max-content; max-width: calc(100% - 24px); left: 50%; right: auto; transform: translateX(-50%); }
.artwork-credit { font-size: 12px; line-height: 1.6; color: var(--muted); }
.artwork-credit a { text-decoration: underline; text-underline-offset: 3px; }
#progress-segments { overflow: hidden; max-width: 200px; }
#progress-segments.dense { gap: 0; }
.progress-segments i { min-width: 0; flex: 0 1 18px; }
.progress-copy { min-width: 0; flex: 1; }
.canvas-footer .primary-button { flex-shrink: 0; }
.canvas-controls .text-button, .guide-toggle { font-size: 12px; }
.canvas-footer { gap: 12px; }
.canvas-footer .primary-button { padding: 13px 14px; font-size: 13px; }
.progress-copy { font-size: 12px; }
.interaction-hint { font-size: 12px; line-height: 1.6; margin-top: 12px; }
.preview-tabs { gap: 16px; margin-top: 17px; }
.preview-art { height: 212px; }
.preview-art .paper-art { width: 190px; height: 190px; transform: none; }
.preview-art:before { width: 170px; height: 170px; }
.preview-art-caption > span:first-child { font-size: 18px; font-weight: 400; letter-spacing: 0; }
.preview-art-caption > span:last-child { font-size: 12px; margin-top: 5px; }
.meaning-preview { margin-top: 19px; padding-top: 16px; }
.meaning-preview h3 { font-size: 20px; line-height: 1.4; }
.meaning-preview p { color: var(--jade); font-size: 12px; line-height: 1.5; }
.meaning-preview a { font-size: 12px; }
.little-reminder { margin-top: 19px; }
.studio-footer { padding-block: 22px; margin-top: 24px; }
.story-heading h1, .stories-intro h1, .story-card h2 { font-weight: 400; }
.is-embedded body { background: var(--paper); }
.is-embedded .site-header, .is-embedded .studio-footer { display: none; }
.is-embedded #studio-view { padding: 22px 24px 24px; max-width: none; }
.is-embedded .intro { padding: 0 0 18px; gap: 14px; }
.is-embedded .intro > div:first-child { margin-right: auto; }
.is-embedded .intro h1 { font-size: 24px; }
.is-embedded .intro p { font-size: 12px; margin-top: 5px; }
.is-embedded #embed-help { display: grid; flex-shrink: 0; }
.is-embedded .mode-switch { padding: 3px; }
.is-embedded .mode-switch button { padding: 10px 13px; font-size: 12px; }
.is-embedded .workbench { grid-template-columns: 180px minmax(0, 1fr) 194px; gap: 18px; padding-top: 20px; }
.is-embedded .cutting-panel { padding-inline: 18px; }
.is-embedded .cutting-mat { height: 350px; }
.is-embedded .little-reminder { display: none; }
.is-embedded dialog { top: 20px; bottom: auto; margin: 0 auto; max-height: min(calc(100vh - 40px), calc(var(--host-height, 100vh) - 40px)); overflow-y: auto; }
.is-embedded .toast { position: fixed; bottom: auto; top: 12px; }
@media (max-width: 1100px) {
  .site-header, #studio-view { padding-inline: 24px; }
  .workbench { grid-template-columns: 180px minmax(0, 1fr) 190px; gap: 18px; }
  .cutting-panel { padding-inline: 18px; }
  .intro h1 { font-size: 30px; }
  .mode-switch button { font-size: 12px; padding: 11px 13px; }
  .is-embedded .intro h1 { font-size: 21px; }
  .is-embedded .intro p { max-width: 240px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .workbench, .is-embedded .workbench { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; }
  .cutting-panel, .is-embedded .cutting-panel { border-right: 0; padding-right: 0; }
  .preview-panel { display: grid; grid-column: 1/-1; grid-template-columns: 190px minmax(0, 1fr); column-gap: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
  .preview-panel .panel-heading, .preview-panel .preview-art-caption { display: none; }
  .preview-panel .preview-tabs { display:flex; grid-column:1/-1; grid-row:2; justify-content:center; margin-top:8px; }
  .preview-panel .preview-tabs button { min-height:40px; }
  .preview-panel .preview-art { grid-column: 1; grid-row: 1; height: 166px; }
  .preview-panel .preview-art .paper-art { width: 158px; height: 158px; }
  .preview-panel .preview-art:before { width: 146px; height: 146px; }
  .preview-panel .meaning-preview { grid-column: 2; grid-row: 1; border: 0; margin: 0; align-self: center; padding: 0; }
  .preview-panel .little-reminder { display: none; }
  .is-embedded .intro h1 { font-size: 20px; }
  .is-embedded .intro p { display: none; }
}
@media (max-width: 760px) {
  .site-header { height: 66px; padding-inline: 18px; }
  .brand-name { font-size: 19px; }
  .brand-name small, .site-header nav { display: none; }
  #studio-view { padding-inline: 18px; }
  .intro { flex-direction: column; align-items: stretch; padding: 23px 0; gap: 16px; }
  .intro h1 { font-size: 28px; text-align: left; }
  .intro p { display: block; font-size: 13px; }
  .mode-switch { width: 100%; }
  .mode-switch button { flex: 1; justify-content: center; min-height: 44px; }
  .workbench, .is-embedded .workbench { display: flex; flex-direction: column; gap: 22px; }
  .pattern-panel .panel-heading { display: flex; align-items: baseline; gap: 10px; }
  .pattern-panel .tiny-label { display: block; margin: 0; }
  .pattern-filters { margin: 10px 0 12px; }
  .pattern-filters select { width: 100%; }
  .pattern-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pattern-card { min-width: 0; }
  .pattern-title { font-size: 11px; min-height: 2.8em; white-space: normal; }
  .pattern-level { font-size: 10px; }
  .pattern-pagination { margin-top: 9px; }
  .pattern-pagination .icon-button { width: 44px; height: 44px; }
  .paper-colors { display: flex; justify-content: space-between; align-items: center; border: 0; padding: 0; margin-top: 10px; }
  #colors { margin: 0; gap: 22px; }
  .color-dot { width: 22px; height: 22px; }
  .color-dot:before { content: ''; position: absolute; inset: -10px; }
  .color-dot.active:after { left: 8px; top: 8px; }
  .cutting-panel, .is-embedded .cutting-panel { border: 0; border-top: 1px solid var(--line); padding: 17px 0 0; }
  .canvas-heading h2 { font-size: 21px; }
  .canvas-heading #current-fold { font-size: 11px; }
  .history-actions .icon-button { width: 44px; height: 44px; }
  .cutting-mat, .is-embedded .cutting-mat { height: 350px; }
  .tool { min-width: 52px; }
  .tool-dock { padding-inline: 5px; gap: 2px; }
  .canvas-controls { flex-wrap: wrap; min-height: 48px; }
  .canvas-controls .text-button, .guide-toggle { min-height: 44px; font-size: 11px; }
  .canvas-footer .primary-button { font-size: 12px; padding: 12px; }
  .progress-copy { font-size: 11px; }
  .preview-panel { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
  .preview-panel .panel-heading, .preview-panel .preview-art-caption { display: none; }
  .preview-panel .preview-tabs { display:flex; grid-column:1/-1; grid-row:2; justify-content:center; margin-top:0; }
  .preview-panel .preview-tabs button { min-height:44px; font-size:12px; }
  .preview-panel .preview-art { grid-column: 1; grid-row: 1; height: 120px; align-self: center; }
  .preview-panel .preview-art .paper-art { width: 110px; height: 110px; }
  .preview-panel .preview-art:before { width: 98px; height: 98px; }
  .preview-panel .meaning-preview { grid-column: 2; grid-row: 1; border: 0; padding: 0; margin: 0; }
  .preview-panel .meaning-preview h3 { font-size: 17px; margin-top: 5px; }
  .preview-panel .meaning-preview p { font-size: 11px; margin-top: 6px; }
  .preview-panel .meaning-preview a { font-size: 12px; margin-top: 9px; min-height: 30px; }
  .preview-panel .little-reminder { display: none; }
  .meaning-label { font-size: 10px; }
  .studio-footer { display: none; }
  .is-embedded #studio-view { padding: 18px 16px 22px; }
  .is-embedded .intro { display: grid; grid-template-columns: 1fr 36px; gap: 14px 8px; }
  .is-embedded .intro > div:first-child { grid-row: 1; margin: 0; }
  .is-embedded .intro h1 { font-size: 22px; }
  .is-embedded .intro p { font-size: 11px; max-width: none; }
  .is-embedded .mode-switch { grid-row: 2; grid-column: 1/-1; }
  .is-embedded #embed-help { grid-column: 2; grid-row: 1; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .story-card-art { height: auto; aspect-ratio: 1; }
  .story-card h2 { font-size: 18px; }
  .story-card p, .story-card .back-link { font-size: 12px; }
}
.is-homepage .intro > div:first-child { display:none; }
.is-homepage .intro { justify-content:space-between; margin-bottom:0; padding-bottom:12px; }
.is-homepage #studio-view { padding-top:16px; }
.is-homepage .cutting-mat { height:300px; }
@media(max-width:760px) {
  .is-homepage .intro { display:flex; flex-direction:row; align-items:center; gap:8px; margin-bottom:0; padding-bottom:12px; }
  .is-homepage .mode-switch { flex:1; width:auto; min-width:0; }
  .is-homepage .mode-switch button { font-size:11px; padding-inline:6px; gap:5px; }
  .is-homepage .cutting-mat { height:270px; }
  .is-homepage .cutting-panel { border-top:0; padding-top:0; }
  .is-homepage .pattern-panel { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
}
@media (max-width: 360px) {
  .pattern-list { gap: 7px; }
  .pattern-title { font-size: 10px; min-height: 2.8em; }
  .pattern-level { font-size: 9px; }
  .canvas-footer { flex-wrap: wrap; }
  .canvas-footer .primary-button { flex: 1; }
  .preview-panel { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
  .preview-panel .preview-art .paper-art { width: 86px; height: 86px; }
  .preview-panel .preview-art:before { width: 80px; height: 80px; }
  .is-embedded .intro h1 { font-size: 19px; }
}