:root{--paper:#fffdf7;--desk:#f3ecde;--ink:#34362f;--muted:#747468;--red:#cc4939;--blue:#3565b3;--line:#dedbcc;--green:#4f6c48;--hand:'Patrick Hand','Comic Sans MS',cursive;--sketch:'Cabin Sketch',var(--hand);--sans:'DM Sans',sans-serif;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--desk);color:var(--ink);font:14px/1.45 var(--sans);background-image:radial-gradient(#b0a18b24 .7px,transparent .7px);background-size:5px 5px}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid var(--blue)}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.35;cursor:default}button{transition:background .15s,transform .15s}button:hover:not(:disabled){transform:translateY(-1px)}[hidden]{display:none!important}.studio{max-width:1600px;margin:auto;padding:0 32px}.studio-header{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid #cdc8b7;gap:16px}.wordmark{display:flex;align-items:center;font:700 28px var(--sketch);letter-spacing:-1px}.wordmark>span:last-child{color:var(--red)}.brand-mark{display:grid;place-items:center;width:34px;height:37px;margin-right:9px;font:32px var(--sketch);color:var(--paper);background:var(--red);border-radius:8px 3px 9px 4px;transform:rotate(-7deg)}.mode-nav{display:flex;align-items:center;gap:8px;background:#e6e1d4;padding:4px;border-radius:9px}.mode-nav a{padding:8px 16px;font-size:13px;font-weight:600;border-radius:6px}.mode-nav a[aria-current]{background:var(--paper);box-shadow:0 1px 3px #342f2920}.mode-nav span{display:inline-block;margin-left:7px;font:12px var(--hand);opacity:.65}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border:1px solid #c8c4b5;border-radius:5px;background:var(--paper);font-size:12px;font-weight:600;white-space:nowrap}.button:hover{background:#f5f1e8}.button.ink{color:var(--paper);background:var(--ink);border-color:var(--ink)}.button.ink:hover{background:#4b4e44}.button.small{font-size:12px;background:transparent}#savedCount{padding:0 5px;background:#e3ddcd;border-radius:3px;font:14px var(--hand)}.studio-intro{position:relative;display:flex;align-items:center;gap:70px;padding:30px 4px 25px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;margin:0 0 9px;color:var(--muted)}h1{font:700 clamp(30px,3vw,43px)/.95 var(--sketch);letter-spacing:-.5px;margin:0}h1 em{font-style:normal;color:var(--red)}.studio-intro>p{font:21px/1.4 var(--hand);color:#76715d;transform:rotate(-2deg);margin:17px 0 0}.intro-doodle{font:80px/.6 var(--hand);color:var(--blue);margin-left:auto;transform:rotate(-14deg);padding-right:40px}.intro-doodle span{display:block;font:17px var(--hand);margin-top:15px}.document-bar{display:flex;align-items:center;justify-content:space-between;border:1px solid #d0cbbc;background:#fdfaf1;padding:13px 16px;border-radius:8px 8px 0 0;gap:14px}.document-name{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.doc-icon{font-size:26px;color:var(--red)}#levelName{width:min(330px,100%);min-width:80px;border:0;background:transparent;font:24px var(--hand);padding:1px 4px}.saved-state{font-size:10px;color:var(--green);white-space:nowrap}.document-actions{display:flex;gap:8px}.workbench{display:grid;grid-template-columns:175px minmax(0,1fr) 250px;gap:20px;background:#e9e4d7;padding:20px 18px 16px;border:1px solid #d0cbbc;border-top:0;border-radius:0 0 8px 8px;align-items:start}.panel{background:#faf7ee;border:1px solid #d4cfbf;border-radius:4px;padding:15px 12px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.panel-heading h2{font:21px var(--hand);margin:0}.panel-heading>span{font:12px var(--sans);color:#aaa18a}.micro{font-size:11px;line-height:1.5;color:var(--muted);margin:8px 0 14px}.select-tool{width:100%;display:flex;align-items:center;gap:8px;border:1px dashed #bbb6a6;border-radius:4px;background:transparent;padding:8px;font-size:11px;margin:12px 0}.select-tool>span{font-size:20px}.select-tool[aria-pressed=true]{background:#e4eaf3;border:1px solid #a9bedb;color:#244d85}.select-tool kbd{margin-left:auto;opacity:.65}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.toy{border:1px solid transparent;border-radius:5px;background:#f0ede3;display:grid;justify-items:center;gap:3px;padding:7px 3px;font-size:10px}.toy[aria-pressed=true]{border-color:var(--blue);background:#e1eaf7;box-shadow:inset 0 0 0 1px var(--blue)}.toy svg,.toy img{width:37px;height:32px;overflow:visible}.palette-note{display:flex;gap:7px;margin:21px 0 1px;padding-top:12px;border-top:1px dashed #c9c2ae}.palette-note>span{font-size:25px;color:#aa8c3e}.palette-note p{font:15px/1.3 var(--hand);margin:0;color:#8a7a5c}.stage-column{min-width:0}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;height:36px;margin-bottom:16px;gap:10px}.canvas-toolbar>div{display:flex;gap:6px;align-items:center}.icon-button{width:30px;height:30px;display:grid;place-items:center;background:transparent;border:1px solid #cec8b6;border-radius:4px;font-size:21px;line-height:1}.toolbar-rule{height:20px;border-right:1px solid #cdc7b5;margin:0 5px}.toggle{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}.toggle input{accent-color:var(--blue)}.canvas-paper{position:relative;background:var(--paper);box-shadow:1px 3px 4px #3f382629,0 10px 15px -10px #3f382650;transform:rotate(-.25deg);isolation:isolate}.canvas-paper:after{content:'';position:absolute;right:0;top:0;border-top:15px solid #e9e4d7;border-left:15px solid #e1dcca;pointer-events:none}.paper-tab{position:absolute;left:20px;top:-10px;z-index:1;font-size:9px;letter-spacing:.08em;background:#d6debc;padding:5px 13px;transform:rotate(-2deg);box-shadow:0 1px 2px #0002;pointer-events:none}#editorCanvas{width:100%;height:auto;display:block;aspect-ratio:16/9;touch-action:none;cursor:default}.canvas-coordinates{position:absolute;bottom:7px;left:12px;font-size:9px;letter-spacing:.06em;color:#79776b;background:#fffdf7cb;padding:2px 5px;pointer-events:none}.stage-caption{display:flex;justify-content:space-between;gap:12px;margin:15px 0 25px;font-size:10px;color:var(--muted)}#objectCount{white-space:nowrap}.test-strip{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px dashed #c3b691;border-radius:5px;background:#f4edda;padding:16px 13px}.test-strip>div{display:flex;align-items:center;gap:10px}.test-star{font:36px var(--hand);color:#b89343;transform:rotate(10deg)}.test-strip strong{font:19px var(--hand)}.test-strip p{font-size:10px;margin:3px 0 0;color:#8b8067}.test-button{color:white;background:var(--red);border-color:#b93f30;font-size:12px;box-shadow:0 3px 0 #a3392c;padding:12px 16px}.test-button:hover{background:#bd4031}.bottom-actions{display:flex;gap:20px;align-items:center;padding:18px 3px 0}.bottom-actions>span{flex:1}.text-button{padding:0;border:0;background:none;color:var(--muted);font-size:11px}.text-button:hover{color:var(--blue)}.empty-inspector{display:grid;justify-items:center;text-align:center;padding:15px 4px 23px}.empty-inspector>span{color:#aca68f;font:36px var(--hand)}.empty-inspector strong{font:18px var(--hand);font-weight:400}.empty-inspector p{font-size:11px;color:var(--muted);margin-bottom:0}.selected-heading{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:5px 0 10px}.selected-heading strong{font:21px var(--hand);color:var(--blue)}.selected-heading>span{color:var(--muted);font-size:10px}.field{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:600;margin:10px 0;color:#737365}.field input,.field textarea,.field select{width:100%;min-width:0;border:1px solid #d6d2c5;background:var(--paper);border-radius:4px;padding:7px 8px;font-size:12px;font-weight:400;color:var(--ink)}.field textarea{resize:vertical}.field input[type=checkbox]{width:auto;align-self:start}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.field-label{font-size:10px;font-weight:600;color:#737365;margin:14px 0 8px}.object-actions{display:flex;gap:7px;justify-content:space-between;margin:15px 0}.object-actions .button{padding:7px 9px;font-size:10px}.danger{color:var(--red)}.puzzle-settings{border-top:1px dashed #c7c1ad;padding-top:14px;margin-top:10px}.puzzle-settings summary{font:20px var(--hand);cursor:pointer}.crayon-options{display:flex;flex-wrap:wrap;gap:6px}.crayon-check{position:relative;width:24px;height:33px;display:block;cursor:pointer}.crayon-check input{position:absolute;inset:0;opacity:0}.crayon-check span{display:block;width:13px;height:29px;margin:2px auto;background:var(--color);clip-path:polygon(0 25%,50% 0,100% 25%,100% 100%,0 100%);border-bottom:3px solid #0003;opacity:.22;transform:rotate(4deg)}.crayon-check input:checked+span{opacity:1}.crayon-check:has(input:checked){background:#e9e6d9;border-radius:4px}.crayon-check:has(input:focus-visible){outline:2px solid var(--blue)}.studio-footer{display:flex;justify-content:space-between;gap:20px;padding:19px 0 28px;font-size:10px;color:#88816d}.studio-footer>span{font:16px var(--hand)}.studio-footer a:hover{text-decoration:underline}.notification{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 24px;border-radius:6px;box-shadow:0 4px 20px #0003;max-width:calc(100vw - 32px);font-size:13px;z-index:10}.modal{border:1px solid #c8c2ae;border-radius:8px;background:var(--paper);color:var(--ink);padding:25px;max-width:min(550px,calc(100vw - 28px));max-height:85vh;width:550px;box-shadow:0 24px 80px #2d2b2140}.modal::backdrop,.test-modal::backdrop{background:#383c3290;backdrop-filter:blur(3px)}.modal.wide{width:850px;max-width:min(850px,calc(100vw - 28px))}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.modal-heading h2{font:700 36px var(--sketch);margin:0}.modal-heading .eyebrow{margin-bottom:4px}.modal-actions{display:flex;gap:10px;margin-top:15px}.library-list{display:grid;gap:10px;margin-top:20px}.saved-card{border:1px solid var(--line);padding:12px;display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;border-radius:5px}.saved-card h3{font:22px var(--hand);margin:0}.saved-card p{font-size:10px;color:var(--muted);margin:0}.saved-card .actions{display:flex;gap:5px}.saved-card button{font-size:11px;padding:7px 10px}.empty-library{text-align:center;padding:25px 0}.empty-library span{font:60px var(--hand);color:#b8ad91}.empty-library h3{font:25px var(--hand);margin:0}.empty-library p{font-size:12px;color:var(--muted)}.remix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px}.remix-card{border:1px solid var(--line);background:#f7f4e9;padding:0;border-radius:5px;overflow:hidden;text-align:left}.remix-card canvas{width:100%;height:auto;display:block;aspect-ratio:16/9}.remix-card strong{display:block;font:18px var(--hand);padding:6px 10px}.remix-card small{display:block;font-size:10px;color:var(--muted);padding:0 10px 10px}.test-modal{padding:0;border:1px solid #c8c2ae;border-radius:7px;background:var(--desk);width:calc(100vw - 36px);max-width:1550px;max-height:calc(100vh - 36px);height:calc(100vh - 36px);overflow:hidden}.preview-heading{display:flex;align-items:center;gap:15px;padding:12px 18px;border-bottom:1px solid #ccc5af;flex-wrap:wrap}.preview-heading>div{margin-right:auto}.preview-heading .eyebrow{margin:0}.preview-heading strong{font:23px var(--hand)}#testStatus{font-size:12px;color:var(--green)}#recordHint{background:#dfe8cf}#playFrame{border:0;width:100%;height:calc(100% - 77px);display:block}.advanced summary{cursor:pointer;font-size:10px;color:var(--muted)}.advanced textarea{font:10px/1.4 monospace;width:100%;height:130px}.advanced .button{font-size:10px;padding:6px;margin-top:6px}@media(min-width:1500px){.workbench{grid-template-columns:190px minmax(0,1fr) 270px;gap:25px}}@media(max-width:1100px){.studio{padding:0 18px}.workbench{grid-template-columns:145px minmax(0,1fr) 210px;gap:12px;padding:16px 12px}.intro-doodle{padding-right:10px}.document-actions .button{font-size:11px;padding:9px 10px}.saved-state{display:none}.test-strip{flex-wrap:wrap}.test-strip>.test-button{margin-left:auto}.palette{padding:12px 8px}.palette-grid{gap:4px}.panel-heading h2{font-size:19px}.stage-caption{font-size:9px}}@media(max-width:850px){.workbench{grid-template-columns:140px minmax(0,1fr);grid-template-areas:'palette stage' 'inspector inspector'}.palette{grid-area:palette}.stage-column{grid-area:stage}.inspector{grid-area:inspector;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.inspector>.panel-heading{grid-column:1/-1}.puzzle-settings{border-top:0;padding-top:0;margin-top:0}.studio-intro{gap:35px}.intro-doodle{display:none}.document-bar{flex-wrap:wrap}.document-name{flex-basis:100%}#levelName{width:100%}.saved-state{display:inline}.document-actions{width:100%;justify-content:flex-end}.mode-nav a{padding:6px 9px}.studio-header{gap:8px}.wordmark{font-size:24px}.brand-mark{width:29px;height:31px}.button.small{font-size:10px;padding:9px}.studio-footer{font-size:9px}}@media(max-width:560px){.studio{padding:0 12px}.studio-header{flex-wrap:wrap;padding:16px 0}.mode-nav{order:3;width:100%;justify-content:center}.studio-header>.button{margin-left:auto}.studio-intro{padding:22px 4px;gap:20px}.studio-intro>p{font-size:15px}.studio-intro h1{font-size:30px}.document-bar{padding:12px}.document-actions{gap:5px}.document-actions .button{font-size:10px;padding:8px}.workbench{display:flex;flex-direction:column;padding:14px 10px}.stage-column{order:0;width:100%}.palette{order:1;width:100%}.inspector{order:2;width:100%;grid-template-columns:1fr;gap:10px}.palette-grid{grid-template-columns:repeat(7,1fr)}.toy{font-size:8px;padding:6px 0}.toy svg,.toy img{width:30px}.palette-note{margin-top:12px}.select-tool{max-width:170px}.panel-heading{margin-bottom:4px}.palette .micro{margin-top:4px}.canvas-toolbar{margin-bottom:16px}.toggle{font-size:9px}.stage-caption{margin-bottom:15px}.test-strip{padding:10px}.test-strip strong{font-size:17px}.test-strip p{font-size:9px}.test-star{font-size:27px}.test-button{padding:9px 11px}.bottom-actions{gap:14px;padding:14px 0 5px}.text-button{font-size:10px}.puzzle-settings{border-top:1px dashed var(--line);padding-top:12px}.studio-footer{flex-direction:column;gap:5px}.remix-grid{grid-template-columns:repeat(2,1fr)}.modal{padding:18px}.modal-heading h2{font-size:30px}.saved-card{grid-template-columns:1fr}.test-modal{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}.preview-heading{padding:9px;gap:7px}.preview-heading strong{font-size:18px}.preview-heading .button{font-size:10px;padding:7px}#testStatus{order:4;flex-basis:100%;font-size:10px}#playFrame{height:calc(100% - 110px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* The studio and level library share the game's wood-and-paper shell. */
:root { --hand: var(--font-hand); --sketch: var(--font-sketch); --sans: var(--font-hand); --ink: var(--graphite); --line: #cfc1a5; }
.studio { max-width: none; padding: 10px 14px 16px; display: grid; gap: 12px; }
.studio .top { min-height: 37px; }
.studio .logo { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: .01em; }
.studio .button { font: 17px/1.35 var(--hand); background: var(--paper); border: 2px solid var(--desk-ink); border-radius: var(--hand-radius); padding: 4px 12px 5px; box-shadow: 2px 3px 0 #3a261659; }
.studio .button.ink { color: white; background: var(--green); border-color: var(--green-deep); }
.document-bar { background: var(--paper); border: none; border-radius: 0; padding: 10px 12px; box-shadow: var(--shadow); margin-bottom: 14px; }
.document-actions { align-items: center; }
.studio-create-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#saveLevel { min-width: 68px; }
.studio #saveLevel:disabled { opacity: 1; background: #e8efdc; color: var(--green-deep); box-shadow: none; }
.workbench { background: transparent; border: none; padding: 0; grid-template-columns: 175px minmax(0, 1fr) 240px; gap: 14px; }
.panel { background: var(--paper); border: none; border-radius: 0; box-shadow: var(--shadow); }
.panel-heading h2 { font: 700 24px var(--sketch); }
.panel-heading > span { display: none; }
.micro, .field, .field-label, .toggle { font-size: 14px; }
.field input, .field select, .field textarea { font: 16px var(--hand); border-color: #b7a991; }
.select-tool, .toy { font-size: 14px; }
.select-tool { background: var(--paper); border-color: #b7a991; }
.palette-note p { color: var(--muted); }
.canvas-toolbar { background: var(--paper); padding: 6px 10px; height: auto; box-shadow: var(--shadow); margin-bottom: 16px; }
.canvas-paper { transform: none; box-shadow: var(--shadow); }
.canvas-paper::after { border: none; width: 70px; height: 22px; top: -5px; right: -4px; background: var(--tape); transform: rotate(35deg); }
.canvas-paper::before { content: ''; position: absolute; width: 70px; height: 22px; top: -5px; left: -4px; background: var(--tape); transform: rotate(-35deg); z-index: 1; pointer-events: none; }
.paper-tab { display: none; }
.stage-caption { font-size: 14px; color: var(--desk-ink); margin: 12px 0; }
.test-strip { background: var(--paper); border: none; box-shadow: var(--shadow); }
.test-strip p { font-size: 14px; color: var(--muted); }
.studio .test-button { color: white; background: var(--green); border-color: var(--green-deep); }
.text-button { font-size: 15px; color: var(--desk-ink); }
.bottom-actions { background: var(--paper); padding: 10px; margin-top: 14px; }
.empty-inspector p, .advanced summary { font-size: 14px; }
.studio .object-actions .button { font-size: 14px; padding: 4px 8px; }
.levels-browser { padding: 16px; background: var(--paper); box-shadow: var(--shadow); }
.browse-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 16px; }
.browse-heading h1, .browse-heading h2 { font: 700 30px var(--sketch); margin: 0; }
.world-picker { display: flex; gap: 8px; align-items: center; }
.world-picker select { font: 18px var(--hand); border: 2px solid var(--desk-ink); background: var(--paper); padding: 5px 8px; max-width: 100%; }
.campaign-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.campaign-card { min-width: 0; background: #f7f2e5; border: 1px solid #cfc1a5; padding-bottom: 10px; }
.campaign-card canvas { display: block; width: 100%; aspect-ratio: 16 / 9; }
.campaign-card h3 { font: 21px var(--hand); margin: 8px 10px 2px; }
.campaign-card p { font-size: 15px; color: var(--muted); margin: 0 10px 10px; }
.level-actions { display: flex; gap: 8px; align-items: center; margin: 0 10px; }
.level-stars { color: #a46b09; margin-right: auto; white-space: nowrap; font-size: 16px; }
.level-actions .button { padding: 2px 7px; font-size: 15px; }
.library-list { margin-top: 0; }
.saved-card { background: #f7f2e5; border-radius: 0; }
.saved-card p, .saved-card button { font-size: 15px; }
.saved-card .text-button { color: var(--red-ink); }
.empty-library { padding: 10px; }
.empty-library p { font-size: 17px; }
@media (max-width: 1100px) { .campaign-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .workbench { grid-template-columns: 150px minmax(0, 1fr) 220px; gap: 12px; } }
@media (max-width: 850px) { .workbench { grid-template-columns: 140px minmax(0, 1fr); } .campaign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .studio { padding: 10px; }
  .studio .top { gap: 10px; }
  .studio .logo { font-size: 28px; }
  .workspace-tabs { margin-left: auto; }
  .document-actions { flex-wrap: wrap; justify-content: flex-start; }
  .browse-heading { flex-wrap: wrap; }
  .levels-browser { padding: 12px; }
  .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .level-actions { flex-wrap: wrap; margin: 0 8px; gap: 6px; }
  .level-stars { flex-basis: 100%; }
  .world-picker { width: 100%; }
  .world-picker select { min-width: 0; flex: 1; }
}

.select-tool .cursor-icon { width: 20px; height: 24px; flex: 0 0 auto; fill: currentColor; stroke: var(--paper); stroke-width: 1.2; stroke-linejoin: round; }
.document-actions > .test-button { white-space: nowrap; }

.campaign-sections { display: grid; gap: 26px; }
.world-section { min-width: 0; scroll-margin-top: 16px; }
.world-section h2 { font: 700 26px var(--sketch); margin: 0 0 12px; }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.level-grid .campaign-card { display: flex; flex-direction: column; }
.level-grid .campaign-card .level-actions { margin-top: auto; }
.level-grid .campaign-card p { margin-bottom: 10px; }
.level-grid .empty-library { grid-column: 1 / -1; }
.studio-card .actions { margin-top: auto; }
.studio-card .studio-meta { font-size: 13px; }
.studio-card .actions .danger { margin-left: auto; padding: 2px 5px; color: var(--red-ink); }
.studio #btnHome { margin-left: auto; }
#editorPanel .document-name { gap: 8px; }
@media (max-width: 640px) {
  .world-section h2 { font-size: 23px; }
  .level-grid { gap: 10px; }
  .world-levels .level-stars { flex-basis: auto; }
  #editorPanel .document-name > .button { font-size: 15px; padding: 4px 8px; }
  #editorPanel .document-name .doc-icon { display: none; }
}

.inspector.panel { display: block; }
.properties-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.properties-tabs .button { flex: 1; }
.properties-tabs .button[aria-selected="true"] { background: var(--sticky); }
.inspector .puzzle-settings { border-top: 0; padding-top: 0; margin-top: 0; }

.toy img { object-fit: contain; }

/* Keep every tool reachable without stretching the editor past the canvas. */
.palette { display: flex; flex-direction: column; max-height: calc(100dvh - 160px); }
.palette > .panel-heading, .palette > .select-tool { flex-shrink: 0; }
.palette-grid { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
@media(max-width:560px) { .palette { max-height: none; } .palette-grid { overflow: visible; } }

.delete-modal { max-width: min(480px, calc(100vw - 28px)); background: var(--paper); border: 2px solid var(--desk-ink); border-radius: var(--hand-radius); }
.delete-modal p { font-size: 18px; overflow-wrap: anywhere; }
.delete-modal .modal-actions { justify-content: flex-end; }
.delete-modal .button { font: 17px/1.35 var(--hand); border: 2px solid var(--desk-ink); border-radius: var(--hand-radius); box-shadow: 2px 3px 0 #3a261659; }
.delete-modal #confirmDelete { background: var(--red); border-color: #9a3023; color: white; }

.create-modal { width: 480px; background: var(--paper); border: 2px solid var(--desk-ink); border-radius: var(--hand-radius); }
.create-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.create-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 124px; padding: 18px 10px; font: 21px/1.2 var(--hand); color: var(--desk-ink); background: #f7f2e5; border: 2px solid var(--desk-ink); border-radius: var(--hand-radius); box-shadow: 2px 3px 0 #3a261659; }
.create-option svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.create-option:hover, .create-option:focus-visible { background: var(--sticky); }
@media(max-width:400px) { .create-options { grid-template-columns: 1fr; } .create-option { flex-direction: row; min-height: 80px; } }