.studio-page { background: #f8f5ee; color: #515c4d; }
.studio-page button, .studio-page input { font: inherit; }
.studio-page button { cursor: pointer; color: inherit; }
.studio-page button:disabled { opacity: .35; cursor: default; }
.studio-page :focus-visible { outline: 2px solid #64775c; outline-offset: 4px; }
.studio-header { min-height: 82px; padding: 0 4vw; display:flex; align-items:center; gap: 44px; border-bottom: 1px solid var(--line); }
.back-link { font-size: 12px; }.header-caption { margin-left:auto; font: italic 15px 'DM Sans',Arial,sans-serif; color:#7b806f; }
.studio-main { max-width: 1550px; margin:auto; padding: 43px 4vw 0; }
.studio-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; }.studio-intro .eyebrow { font-size:10px; margin-bottom:14px; }
.studio-intro h1 { font-size:clamp(32px,3.5vw,53px); line-height:1.15; margin:0 0 13px; letter-spacing:-.045em; }.studio-intro h1 em { color:#a97882; }.studio-intro p:not(.eyebrow) { font-size:13px; margin:0; color:#777b70; }
.craft-switch { display:flex; flex-shrink:0; padding:5px; border:1px solid var(--line); border-radius:30px; gap:4px; }.craft-switch a { font-size:12px; padding:10px 16px; border-radius:25px; }.craft-switch [aria-current] { background:#74836b; color:#fffdf7; }
.inspiration { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:28px 0 23px; }.inspiration > span { margin-right:10px; font-size:9px; }.inspiration button { background:transparent; border:1px solid var(--line); border-radius:22px; padding:9px 13px; font-size:11px; display:flex; align-items:center; gap:10px; }.inspiration button:hover { background:#eee9df; }.inspiration .blank-template { margin-left:auto; border:none; }
.palette { height:12px; width:36px; display:inline-block; background:radial-gradient(circle at 6px 6px,#d9aab8 0 5px,transparent 6px),radial-gradient(circle at 18px 6px,#efdfcc 0 5px,transparent 6px),radial-gradient(circle at 30px 6px,#bdc5ac 0 5px,transparent 6px); }.forest-palette { filter:hue-rotate(65deg); }.moon-palette { filter:hue-rotate(250deg); }
.workbench { display:grid; grid-template-columns:245px minmax(300px,1fr) 280px; align-items:stretch; border:1px solid #dadcd0; border-radius:5px; overflow:hidden; }
.panel { background:#fffdf8; padding:25px 21px; }.panel-heading h2 { font-size:26px; letter-spacing:-.04em; margin:10px 0; }.panel-heading .eyebrow { font-size:9px; color:#828774; }.panel-heading p { font-size:11px; line-height:1.6; min-height:35px; margin-bottom:18px; color:#7b7f72; }
.material-tabs { display:flex; gap:5px; border-bottom:1px solid var(--line); padding-bottom:13px; margin-bottom:14px; }.material-tabs button { background:none; border:0; padding:6px 10px; border-radius:15px; font-size:11px; }.material-tabs [aria-pressed=true] { background:#e9ede2; }
.material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.material-card { border:1px solid #e7e5dc; background:#faf8f2; border-radius:5px; min-height:100px; padding:12px 3px 9px; display:flex; align-items:center; flex-direction:column; gap:5px; }.material-card:hover { border-color:#87977c; background:#f0f1e8; }.material-card .bead-swatch { height:33px; width:33px; margin-bottom:5px; }.material-card span:not(.bead-swatch) { font-size:10px; }.material-card small { font-family:'DM Sans',Arial,sans-serif; font-size:9px; color:#878979; }.tray-footnote { font-size:10px; color:#818575; line-height:1.6; margin:18px 0 0; }
.bead-swatch { display:block; border-radius:50%; background:radial-gradient(circle at 30% 24%,#ffffffd9,transparent 40%),radial-gradient(ellipse at 70% 80%,#00000020,transparent 60%),var(--bead-color); box-shadow:inset -2px -3px 5px #00000015,inset 1px 1px 2px #ffffffcc,0 3px 5px #514c3e20; border:1px solid #ffffff65; }.bead-swatch[data-texture=stone] { background:radial-gradient(ellipse at 25% 20%,#ffffffaf,transparent 50%),repeating-linear-gradient(120deg,transparent 0 7px,#ffffff18 8px 10px,transparent 11px 18px),radial-gradient(ellipse at 70% 80%,#00000022,transparent 60%),var(--bead-color); }.bead-swatch[data-texture=metal] { background:linear-gradient(120deg,#9f8145,#f4e4ae 32%,#c3a468 60%,#f0d9a1 80%,#a18752); }
.canvas-panel { background:#edf0e5; border-left:1px solid #dadcd0; border-right:1px solid #dadcd0; padding:23px 23px 0; display:flex; flex-direction:column; min-width:0; background-image:radial-gradient(#93a18318 .8px,transparent .8px); background-size:7px 7px; }.canvas-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }.canvas-top h2 { font-size:9px; margin:0; letter-spacing:.07em; }.history-controls { display:flex; gap:6px; }.history-controls button { border:1px solid #cdd4c1; border-radius:50%; width:31px; height:31px; background:#f7f8ef; font-size:20px; }
.bracelet-stage { width:100%; aspect-ratio:1; max-width:490px; margin:auto; position:relative; }.stage-ring { position:absolute; inset:10%; border:1px solid #b4bca24d; border-radius:50%; box-shadow:0 0 0 20px #ffffff25,0 0 0 21px #b4bca21f; }.stage-center { position:absolute; inset:30%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; text-align:center; pointer-events:none; }.center-wordmark { color:#8a967f; font:italic 30px/1.1 'DM Sans',Arial,sans-serif; letter-spacing:-.07em; }.center-wordmark > span { color:#b79ba3; }#center-label { max-width:130px; font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:.08em; line-height:1.5; color:#7c8872; }
#bracelet { position:absolute; inset:0; }.placed-bead { position:absolute; padding:0; border:0; background:none; border-radius:50%; transform:translate(-50%,-50%); min-width:12px; min-height:12px; }.placed-bead .bead-swatch { width:100%; height:100%; }.placed-bead[aria-pressed=true] { outline:2px solid #66795b; outline-offset:4px; z-index:2; }.placed-bead:hover { filter:brightness(1.06); }
.canvas-caption { display:flex; justify-content:space-between; gap:10px; font-size:9px; padding:10px 0 20px; color:#7c8670; }#bead-count { font-family:'DM Sans',Arial,sans-serif; }.edit-tools { background:#f9faf3b3; border:1px solid #d9dfcd; border-radius:4px; padding:13px; min-height:87px; }.edit-tools p { font-size:11px; margin:0 0 10px; }.edit-tools > div { display:flex; gap:6px; flex-wrap:wrap; }.edit-tools button { background:#fffdf6; border:1px solid #d5dacb; border-radius:3px; font-size:10px; padding:6px 9px; }.canvas-note { text-align:center; font:italic 14px 'DM Sans',Arial,sans-serif; color:#8c967f; margin:24px 0; }
.details .panel-heading { margin-bottom:24px; }.field-label { display:block; font-size:11px; margin-bottom:10px; }#design-name { width:100%; border:1px solid #dddfd2; background:#faf9f4; color:#515c4d; padding:12px; border-radius:3px; font-size:13px; margin-bottom:25px; }.wrist-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }.wrist-heading output { font-family:'DM Sans',Arial,sans-serif; font-size:11px; }#wrist { width:100%; accent-color:#7e8c71; margin:5px 0; }.range-labels { display:flex; justify-content:space-between; font-size:9px; color:#919280; }
.fit-card { background:#f2f1e9; border-radius:4px; padding:13px; margin:20px 0; }.fit-card > div { display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:10px; line-height:1.5; }.fit-card strong { white-space:nowrap; font:12px 'DM Sans',Arial,sans-serif; }.fit-card p { font-size:11px; line-height:1.5; margin:9px 0; }.fit-card small { display:block; font-size:9px; line-height:1.6; color:#898b7d; }.material-summary { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; }.material-summary summary { cursor:pointer; font-size:11px; }#summary-count { float:right; color:#949785; font-size:10px; }#material-list { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:9px; }#material-list li { display:flex; align-items:center; gap:8px; font-size:10px; }#material-list .bead-swatch { width:12px; height:12px; box-shadow:none; }#material-list .quantity { margin-left:auto; font-family:'DM Sans',Arial,sans-serif; }
.save-actions { margin-top:23px; }.save-actions button { width:100%; border-radius:3px; font-size:10px; padding:13px 6px; text-transform:none; letter-spacing:.01em; }.save-actions .button-primary { background:#738269; border-color:#738269; color:#fffdf7; margin-bottom:9px; }.save-actions .button-secondary { border-color:#d7dacb; }.save-actions p { font-size:9px; line-height:1.6; color:#858977; min-height:29px; margin:10px 0 16px; }.workshop-link { display:flex; justify-content:space-between; font-size:11px; border-top:1px solid var(--line); padding-top:14px; }
.studio-footer { display:flex; justify-content:space-between; gap:20px; padding:24px 0 30px; font-size:10px; color:#848a79; }.studio-footer > span { font:italic 14px 'DM Sans',Arial,sans-serif; }.noscript-note { padding:20px; }
@media(min-width:1450px) { .workbench { grid-template-columns:270px minmax(300px,1fr) 300px; }.panel { padding:30px; } }
@media(max-width:1100px) { .studio-main { padding:30px 2vw 0; }.workbench { grid-template-columns:205px minmax(280px,1fr) 245px; }.panel { padding:22px 15px; }.canvas-panel { padding:20px 15px 0; } }
@media(max-width:800px) { .studio-header { min-height:65px; gap:25px; }.header-caption { display:none; }.back-link { margin-left:auto; }.studio-main { padding:27px 5vw 0; }.studio-intro { align-items:flex-start; flex-direction:column; gap:20px; }.studio-intro h1 { font-size:37px; }.studio-intro p:not(.eyebrow) { line-height:1.6; max-width:300px; }.inspiration { gap:8px; padding:22px 0; }.inspiration > span { width:100%; margin-bottom:3px; }.inspiration .blank-template { margin-left:0; }.workbench { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.canvas-panel { grid-column:1/-1; grid-row:1; border:0; border-bottom:1px solid #dadcd0; padding:18px 20px 0; }.bracelet-stage { max-width:390px; }.canvas-note { margin:15px 0; }.materials { border-right:1px solid #dadcd0; }.canvas-caption { padding-bottom:15px; }.studio-footer { line-height:1.6; flex-direction:column; gap:8px; } }
@media(max-width:480px) { .studio-main { padding:24px 4vw 0; }.studio-intro h1 { font-size:34px; }.workbench { display:flex; flex-direction:column; }.canvas-panel { order:0; }.materials { order:1; border:0; border-bottom:1px solid #dadcd0; padding:22px 18px; }.details { order:2; padding:24px 18px; }.material-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }.material-card { min-height:89px; }.material-card span:not(.bead-swatch) { font-size:9px; }.material-card .bead-swatch { width:29px; height:29px; }.panel-heading p { min-height:0; }.save-actions { position:sticky; bottom:0; background:#fffdf8; padding:12px 0 2px; z-index:4; }.panel-heading h2 { font-size:25px; }.canvas-caption { font-size:8px; }.inspiration button { font-size:10px; padding:8px 10px; } }
@media(prefers-reduced-motion:no-preference) { .material-card,.inspiration button { transition:background .18s,border-color .18s; } }
/* Photo-reference palette. Crops are a presentation layer; source files stay intact. */
.sample-swatch { position:relative; overflow:hidden; isolation:isolate; border:0; background:none!important; }
.sample-swatch img { position:absolute; max-width:none; display:block; pointer-events:none; }
.material-item { position:relative; min-width:0; }
.material-item .material-card { width:100%; height:100%; padding-top:20px; }
.material-item .material-card .bead-swatch { width:46px; height:46px; }
.material-info { position:absolute; right:4px; top:3px; width:25px; height:25px; border:0; background:transparent; border-radius:50%; font:italic 13px 'DM Sans',Arial,sans-serif!important; color:#64735b; }
.material-info:hover { background:#e3e9d9; }
.tray-filters { display:grid; grid-template-columns:1.2fr 1fr; gap:8px; }
.tray-filters label { font-size:10px; }
.tray-filters select { display:block; width:100%; min-width:0; padding:8px 2px; margin-top:6px; border:1px solid #d7dccd; border-radius:4px; background:#faf9f3; color:inherit; font:10px 'DM Sans',sans-serif; }
#material-results { margin:12px 0; font-size:9px; }
.material-grid { max-height:485px; overflow-y:auto; padding:4px; margin:-4px; align-content:start; }
.empty-materials { grid-column:1/-1; font-size:12px; line-height:1.6; }
#bead-info { width:min(420px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; box-sizing:border-box; border:1px solid #d6dbc9; border-radius:12px; padding:30px; background:#fffdf7; color:#515c4d; box-shadow:0 20px 80px #26342125; }
#bead-info::backdrop { background:#28332466; }
#close-info { position:absolute; right:12px; top:12px; border:1px solid #d6dbc9; width:34px; height:34px; border-radius:50%; background:transparent; font-size:23px; }
#info-image { display:flex; justify-content:center; margin:12px 0 25px; }
#info-image .bead-swatch { width:125px; height:125px; }
#bead-info h2 { font-size:32px; margin:10px 0; }
#info-subtitle { font-size:12px; color:#7a826f; }
#info-description { font-size:14px; line-height:1.6; }
#bead-info dt { font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-top:18px; color:#7e8772; }
#bead-info dd { margin:5px 0 0; font-size:13px; line-height:1.6; }
.info-disclaimer { font-size:10px; line-height:1.6; border-top:1px solid #dce0d4; padding-top:16px; margin-top:22px; }
#info-source-link { font-size:11px; text-decoration:underline; }
@media(max-width:480px) { #bead-info { width:100%; max-width:none; margin:auto 0 0; border-radius:18px 18px 0 0; max-height:85dvh; }.material-grid { max-height:310px; grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Direct manipulation, with click and keyboard editing as alternatives. */
.placed-bead { touch-action:none; cursor:grab!important; }
.material-card { cursor:grab!important; touch-action:pan-y; }
.material-card .bead-swatch { touch-action:none; }
.material-card, .placed-bead { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.bead-dragging, .bead-dragging * { cursor:grabbing!important; user-select:none!important; }
.drag-source.placed-bead { opacity:.18; }
.drag-source.material-card { border-color:#7b8d69; }
.bead-drag-ghost { position:fixed; z-index:1000; width:48px; height:48px; transform:translate(-50%,-50%); pointer-events:none; filter:drop-shadow(0 7px 7px #38432c55); }
.bead-drag-ghost .bead-swatch { width:100%; height:100%; }
.drop-marker { display:none; position:absolute; width:19px; height:19px; border:2px solid #688052; background:#f8fff1; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:5; box-shadow:0 0 0 5px #7b956c25; }
.drop-marker.visible { display:block; }
.drop-ready .stage-ring { border-color:#74896b; box-shadow:0 0 0 20px #ffffff35,0 0 0 21px #8fa67c66; }
.bead-drop-bin { display:none; position:fixed; z-index:999; bottom:20px; left:50%; transform:translateX(-50%); padding:20px 35px; border:1px dashed #ac7975; background:#fff4ee; color:#855752; border-radius:35px; font:13px 'DM Sans',sans-serif; pointer-events:none; box-shadow:0 5px 30px #514b3520; }
.bead-drop-bin.visible { display:block; }.bead-drop-bin.is-over { background:#855752; color:#fff; border-style:solid; }
.drag-hint { font-size:10px; line-height:1.6; text-align:center; color:#6b795d; min-height:32px; margin:0 0 12px; }
.edit-tools[hidden] { display:none; }
@media(prefers-reduced-motion:no-preference) { .bead-dragging .placed-bead { transition:left .13s,top .13s,width .13s,height .13s; } }
/* Off-ring removal preview: the dragged bead leaves the string immediately. */
.drag-source.placed-bead { opacity:0; }
.bead-drag-ghost.will-remove { opacity:.4; filter:grayscale(.6); }
.bead-drag-ghost.will-remove::after { content:'×'; position:absolute; right:-6px; top:-8px; width:22px; height:22px; line-height:20px; text-align:center; border-radius:50%; background:#855752; color:white; font-size:20px; }
.capacity-hint { font:10px/1.6 'DM Sans',sans-serif; color:#758369; text-align:center; margin:0 0 8px; }
.capacity-hint .over-limit { color:#995b4f; font-weight:600; }
/* Mobile workbench: both the design and the bead tray stay in view. */
.mobile-dock { display:none; }
#design-details-sheet { width:min(480px,100%); max-width:none; max-height:88dvh; margin:auto auto 0; padding:0; border:1px solid #d6dbc9; border-radius:18px 18px 0 0; background:#fffdf8; color:var(--ink); overscroll-behavior:contain; }
#design-details-sheet::backdrop { background:#28332466; }
#close-design-details { position:sticky; top:10px; float:right; margin:10px 12px -44px 0; z-index:6; border:1px solid #d6dbc9; width:36px; height:36px; border-radius:50%; background:#fffdf8; color:var(--ink); font-size:24px; }
#design-details-sheet .details { padding:28px 24px max(24px,env(safe-area-inset-bottom)); }
#design-details-sheet .save-actions { position:static; }
@keyframes bead-arrival { from { scale:.5; opacity:.35; } to { scale:1; opacity:1; } }
@media(prefers-reduced-motion:no-preference) { .bead-just-added { animation:bead-arrival .25s ease-out; } }
@media(max-width:800px) {
  body.studio-page { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
  .studio-header { flex:0 0 48px; min-height:48px; padding:0 18px; }
  .studio-header .wordmark { font-size:27px; }
  .studio-main { flex:1; min-height:0; width:100%; padding:0; display:flex; flex-direction:column; }
  .studio-intro,.studio-footer { display:none; }
  .inspiration { flex:0 0 42px; box-sizing:border-box; padding:5px 12px; flex-wrap:nowrap; overflow-x:auto; gap:6px; scrollbar-width:none; }
  .inspiration > span { display:none; }
  .inspiration button { flex-shrink:0; padding:7px 10px; font-size:10px; white-space:nowrap; }
  .inspiration .palette { width:28px; }
  .workbench { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:42% minmax(0,1fr); border:0; border-radius:0; overflow:hidden; }
  .canvas-panel { grid-column:1; grid-row:1; min-height:0; padding:5px 16px 0; position:relative; overflow:hidden; }
  .canvas-top { flex:0 0 28px; }
  .canvas-top h2 { font-size:9px; }
  .history-controls button { width:30px; height:28px; }
  .bracelet-stage { flex:1; min-height:0; width:auto; height:auto; max-width:100%; aspect-ratio:1; margin:0 auto; }
  .canvas-caption { flex:0 0 17px; padding:0; font-size:9px; }
  .capacity-hint { font-size:9px; margin:0; line-height:14px; }
  .drag-hint { flex:0 0 auto; min-height:14px; max-height:28px; overflow-y:auto; font-size:9px; line-height:14px; margin:0 0 3px; }
  .canvas-note { display:none; }
  .center-wordmark { font-size:25px; }#center-label { font-size:9px; }
  .edit-tools { position:absolute; bottom:3px; left:10px; right:10px; z-index:8; padding:7px 10px; min-height:0; box-shadow:0 3px 15px #53614d20; background:#fffdf7; }
  .edit-tools p { font-size:10px; margin-bottom:5px; }
  .edit-tools button { min-height:30px; }
  .materials { grid-column:1; grid-row:2; min-height:0; border:0; border-top:1px solid #d5dbca; border-radius:16px 16px 0 0; padding:9px 12px 0; display:flex; flex-direction:column; overflow:hidden; }
  .materials .panel-heading { display:flex; align-items:baseline; gap:10px; flex:0 0 auto; }
  .materials .panel-heading .eyebrow { display:none; }
  .materials .panel-heading h2 { font-size:20px; margin:0; white-space:nowrap; }
  .materials .panel-heading p { min-height:0; font-size:9px; line-height:1.3; margin:0; max-height:24px; overflow:auto; }
  .material-tabs { flex:0 0 auto; margin:5px 0; padding:0; border:0; }
  .material-tabs button { padding:5px 12px; min-height:28px; }
  .tray-filters { flex:0 0 auto; grid-template-columns:1fr 1fr; }
  .tray-filters label { font-size:9px; }
  .tray-filters select { margin-top:2px; padding:5px 8px; min-height:30px; font-size:12px; }
  #material-results { flex:0 0 auto; margin:4px 0; font-size:9px; }
  .material-grid { flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; grid-template-columns:repeat(4,minmax(0,1fr)); padding:3px 2px 10px; margin:0; gap:7px; }
  .material-item .material-card { min-height:96px; padding:17px 3px 8px; }
  .material-item .material-card .bead-swatch { width:36px; height:36px; }
  .material-card span:not(.bead-swatch) { font-size:9px; line-height:1.2; }
  .material-info { width:28px; height:28px; top:0; right:0; }
  .materials > .tray-footnote:last-child { display:none; }
  .mobile-dock { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #d6dbc9; background:#fffdf8; }
  .mobile-dock > span { font-size:9px; color:#78846c; }
  .mobile-dock button { min-height:38px; padding:9px 14px; border:0; border-radius:5px; background:#738269; color:#fffdf7; font-size:12px; }
  #design-name { font-size:16px; }
  #bead-info { width:100%; max-width:none; margin:auto 0 0; border-radius:18px 18px 0 0; max-height:85dvh; }
}
@media(max-width:360px) { .material-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.mobile-dock > span { max-width:100px; } }
@media(max-width:800px) and (max-height:550px) { .workbench { grid-template-rows:46% minmax(0,1fr); }.materials .panel-heading,.material-tabs,#material-results { display:none; }.tray-filters { margin-bottom:5px; }.inspiration { flex-basis:34px; }.studio-header { flex-basis:40px; min-height:40px; }.capacity-hint { display:none; } }
@media(max-width:800px) and (min-height:551px) {
  .workbench { grid-template-rows:44% minmax(0,1fr); }
  .canvas-top { position:absolute; top:4px; left:14px; right:14px; z-index:3; }
  .bracelet-stage { margin-top:5px; }
  #center-label { white-space:nowrap; font-size:8px; }
}
/* Give the phone canvas to the bracelet; keep supporting text at its edges. */
@media(max-width:800px) {
  .canvas-panel { padding:0 12px; }
  .canvas-top { position:absolute; top:6px; right:12px; left:auto; z-index:3; }
  .canvas-top h2 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .bracelet-stage { flex:1; margin:0 auto; transform:scale(1.12); transform-origin:center; }
  .canvas-caption { position:absolute; top:14px; left:14px; padding:0; z-index:3; font-size:10px; pointer-events:none; }
  .canvas-caption > span:last-child { display:none; }
  .capacity-hint { position:absolute; bottom:5px; left:14px; margin:0; font-size:0; pointer-events:none; }
  #capacity-note { font-size:9px; }
  .mobile-dock > span { display:none; }
  .mobile-dock .drag-hint { flex:1; min-width:0; min-height:0; max-height:42px; margin:0; text-align:left; font-size:10px; line-height:14px; overflow-y:auto; }
  .mobile-dock button { flex-shrink:0; }
}

/* Uzuki studio: warm paper, quiet rules, and room for the materials. */
.studio-page {
  --ink:#53584f;
  --line:#53584f24;
  --studio-paper:#fbf9f5;
  --studio-muted:#73776e;
  --studio-accent:#697660;
  background:var(--studio-paper);
  color:var(--ink);
}
.studio-header { border-color:var(--line); }
.back-link { font-size:11px; }
.header-caption { font-size:13px; color:var(--studio-muted); }
.studio-intro h1 { font-size:clamp(32px,3vw,44px); letter-spacing:-.035em; }
.studio-intro h1 em { color:#8e796f; }
.studio-intro .eyebrow,.panel-heading .eyebrow { font-family:'DM Sans',sans-serif; letter-spacing:.12em; font-size:9px; }
.craft-switch { border:0; padding:0; border-radius:0; gap:20px; }
.craft-switch a { padding:9px 0; border-radius:0; color:var(--studio-muted); }
.craft-switch [aria-current] { background:none; color:var(--ink); border-bottom:1px solid var(--studio-accent); }
.inspiration { gap:18px; }
.inspiration button { border:0; border-radius:0; padding:8px 0; color:var(--studio-muted); }
.inspiration button:hover { background:none; color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.inspiration > span { font-family:'DM Sans',sans-serif; letter-spacing:.1em; }
.workbench { border-color:var(--line); border-radius:0; }
.panel { background:var(--studio-paper); }
.panel-heading h2 { font-size:24px; letter-spacing:-.025em; }
.panel-heading p { color:var(--studio-muted); }
.canvas-panel { background:#f3f0e9; background-image:none; border-color:var(--line); }
.canvas-top h2 { font-family:'DM Sans',sans-serif; letter-spacing:.12em; font-weight:400; }
.history-controls button { background:transparent; border-color:transparent; border-radius:3px; color:var(--studio-accent); }
.history-controls button:hover:not(:disabled) { background:#6976600c; }
.stage-ring { border-color:#8c897b26; box-shadow:none; }
.center-wordmark { color:#8b9182; }
#center-label { color:#747b6c; letter-spacing:.12em; font-size:9px; }
.canvas-caption,.capacity-hint,.drag-hint { color:#6d7367; }
.canvas-note { font-size:12px; color:var(--studio-muted); }
.material-tabs { gap:18px; border-color:var(--line); padding-bottom:0; }
.material-tabs button { border-radius:0; padding:8px 0; border-bottom:1px solid transparent; color:var(--studio-muted); }
.material-tabs [aria-pressed=true] { background:none; color:var(--ink); border-bottom-color:var(--studio-accent); }
.tray-filters { gap:14px; }
.tray-filters select { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding-left:0; }
.tray-filters label,#material-results { color:var(--studio-muted); }
.material-card { border:1px solid transparent; border-radius:2px; background:transparent; }
.material-card:hover { border-color:#69766038; background:#eeede64d; }
.material-info { color:#747b6c; }
.material-info:hover { background:#69766012; }
.material-card small { font-family:'DM Sans',sans-serif; color:var(--studio-muted); }
.material-item .material-card .bead-swatch { margin-bottom:9px; }
#design-name { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; }
.fit-card { background:#f1eee7; border-radius:0; padding:15px; }
.save-actions .button-primary,.mobile-dock button { background:var(--studio-accent); border-color:var(--studio-accent); border-radius:2px; }
.save-actions .button-secondary { border-color:var(--line); border-radius:2px; }
.save-actions { background:var(--studio-paper); }
.edit-tools { background:var(--studio-paper); border-color:var(--line); box-shadow:none; }
#bead-info,#design-details-sheet { background:var(--studio-paper); border-color:var(--line); border-radius:3px; color:var(--ink); }
#bead-info::backdrop,#design-details-sheet::backdrop { background:#363b344d; }
#close-info,#close-design-details { background:var(--studio-paper); border:0; border-radius:2px; }
#bead-info h2 { font-size:29px; letter-spacing:-.025em; }
#bead-info dt { font-family:'DM Sans',sans-serif; letter-spacing:.06em; color:var(--studio-muted); }
@media(max-width:800px) {
  .inspiration { gap:20px; padding-inline:16px; border-bottom:1px solid var(--line); }
  .inspiration button { padding:5px 0; font-size:10px; gap:6px; }
  .canvas-panel { border-bottom:0; }
  .materials { border-radius:0; border-top:1px solid var(--line); padding-inline:16px; }
  .materials .panel-heading h2 { font-size:19px; letter-spacing:-.025em; }
  .materials .panel-heading p { color:var(--studio-muted); }
  .material-tabs { gap:22px; margin:4px 0 6px; }
  .material-tabs button { padding:4px 0; }
  .tray-filters select { padding-left:0; font-size:11px; }
  .material-grid { gap:7px; }
  .material-item .material-card { min-height:96px; }
  .material-item .material-card .bead-swatch { width:39px; height:39px; margin-bottom:6px; }
  .mobile-dock { background:var(--studio-paper); border-color:var(--line); padding-inline:16px; }
  .mobile-dock .drag-hint { font-size:9px; color:var(--studio-muted); }
  .mobile-dock button { font-size:11px; letter-spacing:.02em; }
  #bead-info,#design-details-sheet { border-radius:8px 8px 0 0; }
}

.center-wordmark { font-family:'Josefin Sans','DM Sans',sans-serif; font-weight:300; font-style:normal; letter-spacing:.08em; font-size:28px; }
@media(max-width:800px) { .studio-header .wordmark { font-size:26px; }.center-wordmark { font-size:24px; } }

.header-caption, .canvas-note, .studio-footer > span, .material-info { font-style:normal!important; }