/* A complete craft desk. Depth follows one light source, from the upper left. */
:root {
  --wood-edge:#523522;
  --wood-grain:repeating-linear-gradient(2deg,#492b1610 0 1px,transparent 1px 5px,#ffe3a610 5px 7px,transparent 7px 13px);
  --ivory-face:linear-gradient(145deg,#fffaf0,#eadbc0);
  --key-shadow:inset 0 1px 0 #fffdf5,0 2px 0 #b69a6e,0 5px 0 #8b6f49,2px 9px 10px #392a2033;
  --red-face:linear-gradient(135deg,#a44c47,#792a30 65%,#642329);
}
body {
  padding:24px 22px 48px;
  background-color:#213e37;
  background-image:radial-gradient(ellipse at 22% 0,#67807566,transparent 70%),repeating-linear-gradient(90deg,#00000009 0 1px,transparent 1px 5px);
}
.masthead {
  max-width:1220px;margin:0 auto 35px;border:9px solid #785538;border-top-color:#b48a56;border-left-color:#b48a56;border-bottom-color:#503524;border-right-color:#61432d;
  border-radius:9px;isolation:isolate;
  box-shadow:inset 0 0 0 2px #dbc18c,inset 0 5px 12px #3b2c2355,0 2px 0 #d3ac75,0 10px 0 #39291f,7px 21px 26px #071d195c;
}
.masthead:after {inset:6px;border:1px solid #9b804d80;border-radius:2px;z-index:-1}
.masthead-inner {padding:27px 26px 29px;min-height:185px;gap:24px;perspective:1200px}
.identity {
  position:relative;gap:18px;padding:20px 27px 21px 22px;border:2px solid #b99a60;border-radius:6px;
  background:var(--red-face);transform-style:preserve-3d;
  transform:rotateX(var(--plaque-x,4deg)) rotateY(var(--plaque-y,-4deg));
  box-shadow:inset 0 0 0 4px #692c29,inset 0 0 0 5px #d1af6a,0 2px 0 #9c5f3f,0 5px 0 #552c24,0 9px 0 #392820,9px 20px 19px #38261d52;
  transition:transform .25s ease-out;
}
.identity:before,.identity:after {content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#fff0b4,#997138);box-shadow:0 1px 2px #301e17;top:11px;pointer-events:none}
.identity:before {left:10px}.identity:after {right:10px}
.school-crest {position:relative;z-index:1;transform:translateZ(20px);padding:9px;background:#fffaf0;border:2px solid #d6b879;border-radius:5px;box-shadow:inset 0 0 0 2px #fffef9,0 3px 0 #ab8956,3px 8px 8px #301b2166}
.school-crest img {width:100px;height:auto;object-fit:contain}
.identity-copy {transform:translateZ(9px)}
.school-name {color:#fff0c9;font-size:16px;letter-spacing:1px;text-shadow:0 1px 0 #3a161a}
h1 {color:#fff0c4;font-size:47px;text-shadow:0 1px 0 #dfb16b,1px 2px 0 #491f22,2px 4px 4px #39191e80}
.brand-plaque {color:#f2d7a0;border-color:#d6ad6f;font-size:12px}
.brand-description {color:#ead3ac;font-size:11px;text-shadow:0 1px 0 #4c2221}
.header-tools {gap:18px;perspective:800px}
.header-tools .header-actions {gap:13px}
.header-button {min-height:45px;padding:12px 18px;background:var(--ivory-face);border-color:#a38351;box-shadow:var(--key-shadow);transform:rotateX(5deg);font-size:12px}
.language-switch {padding:5px;gap:5px;background:linear-gradient(#796044,#b3925e);border:1px solid #5a422e;border-radius:6px;box-shadow:inset 0 2px 4px #3b2a2299,0 2px 0 #d2b581,0 6px 0 #5e4530,3px 11px 12px #3a2a273d}
.language-switch button {min-height:33px;min-width:48px;background:var(--ivory-face);box-shadow:inset 0 1px 0 #fff9e3,0 2px 0 #806344;transform:translateY(-1px);transition:transform .12s}
.language-switch button[aria-pressed="true"] {background:var(--red-face);box-shadow:inset 0 2px 4px #3f161b77,0 1px 0 #dfbe85;transform:translateY(1px)}

/* The work surface has a bevel, a thick front edge, and a shadow on the room. */
main {
  max-width:1180px;position:relative;padding:30px 33px 0;border:8px solid #b78b59;border-top-color:#dfb780;border-left-color:#d8ac73;border-right-color:#845b39;border-bottom-color:#845536;border-radius:15px;
  background-color:#ba9567;background-image:var(--wood-grain),linear-gradient(115deg,#d3b78b,#bb9569 55%,#ac8359);
  box-shadow:inset 0 0 0 2px #825c39,inset 0 7px 14px #6d482c33,0 3px 0 #d3a36a,0 9px 0 #6d472d,0 16px 0 #493323,9px 28px 32px #0d221ba6;
}
.workspace {grid-template-columns:270px minmax(0,1fr);gap:34px;perspective:1800px}
.materials {
  margin:8px 0 18px;overflow:visible;border:1px solid #a28c63;border-radius:5px 12px 12px 5px;
  background:linear-gradient(90deg,#d5c3a0,#fcf6e7 10%,#f4ebd6 95%,#dacaab);
  transform:rotateY(3deg) rotateZ(-.65deg);transform-origin:right center;
  box-shadow:2px 2px 0 #f6ead0,4px 4px 0 #b6a079,6px 6px 0 #f1e4c8,8px 8px 0 #aa916a,10px 10px 0 #e9dab9,12px 13px 0 #2a4b41,14px 17px 0 #1c332d,21px 30px 25px #3f2d2555;
}
.materials:before {left:7px;border:0;width:8px;background:linear-gradient(90deg,#65523a27,#fff6df66,#8c795729);z-index:1}
.panel-heading {padding:21px 20px 21px 26px;border-radius:5px 11px 0 0;background:var(--red-face);border-bottom:5px ridge #bf9a5e;box-shadow:inset 0 2px 0 #dfa17c77,0 4px 7px #3c261b33}
.chapter-mark {background:linear-gradient(145deg,#ead8a5,#b69453);color:#65332b;border-color:#8a6837;text-shadow:0 1px #fce8bf;box-shadow:inset 0 1px 0 #fff4c8,0 3px 0 #69482e,2px 5px 5px #3f1f2055;border-radius:2px}
.panel-heading h2 {text-shadow:0 2px 1px #4e1e21}
.materials-body {padding:23px 19px 22px 26px}
.step-number {box-shadow:inset 0 1px 0 #fff8e5,0 2px 0 #b59c70,1px 4px 4px #49342026;background:var(--ivory-face)}
.color-grid {gap:12px 8px}
.color-button {background:linear-gradient(145deg,#fff8e8,#e9dcc0);border-color:#d4c19c;box-shadow:inset 0 1px #fffdf4,0 3px 0 #bda47b,2px 6px 5px #563c2526;padding:7px 4px;transition:transform .14s,box-shadow .14s}
.color-swatch {border-radius:50% 50% 5px 5px;transform:perspective(240px) rotateX(9deg);box-shadow:0 3px 0 #8e775a,1px 7px 7px #5b412c3d}
.color-label {padding-top:3px}
.color-button[aria-pressed="true"] {background:#e3d3b6;transform:translateY(2px);box-shadow:inset 0 2px 5px #664c3833,0 1px 0 #f9ebcc;border-color:#8b3d37}
.color-button[aria-pressed="true"]:after {box-shadow:0 2px 3px #3a252a4d;right:-3px;top:-4px}
.pattern-field {margin-top:25px;padding-top:14px;border-top:3px double #c6b18b}
.pattern-groups,.inspiration-styles {padding:4px;gap:5px;overflow:visible;background:linear-gradient(#bca681,#e0cfae);border-color:#ac9066;border-radius:5px;box-shadow:inset 0 2px 4px #62472d40}
.pattern-groups button,.inspiration-styles button {border:1px solid #c6ad81!important;border-radius:3px;background:var(--ivory-face);box-shadow:0 3px 0 #9d8056,1px 5px 4px #3f2e201f;transition:transform .12s}
.pattern-groups button[aria-pressed="true"],.inspiration-styles button[aria-pressed="true"] {background:var(--red-face);transform:translateY(2px);box-shadow:inset 0 2px 3px #40191f66,0 1px #e2c99e;border-color:#773730!important}
.pattern-grid {gap:12px 9px;padding:4px 0 5px}
.pattern-button {border:1px solid #cdb992;border-radius:4px;background:var(--ivory-face);box-shadow:inset 0 1px #fffaf0,0 3px 0 #b69c73,2px 7px 6px #5035242b;min-height:85px;padding:8px 3px 6px;transform:perspective(400px) rotateX(4deg)}
.pattern-button svg {box-shadow:0 2px 0 #8f7858,1px 5px 5px #533d2e40;transform:rotate(-2deg)}
.pattern-button[aria-pressed="true"] {background:#e6d5b8;transform:translateY(2px);box-shadow:inset 0 2px 4px #4a35252e,0 1px 0 #fff0cf;border:1px solid var(--red)}
.selected-material {margin-top:16px;padding:17px 7px;border:1px solid #c2ae86;border-radius:4px;background:#e6d7b9;box-shadow:inset 1px 3px 5px #66503526,0 1px #fff8e1}
.selected-material #swatch-preview {filter:drop-shadow(2px 5px 2px #68513655)}
.selected-seal {box-shadow:0 2px 0 #ad885e,2px 5px 5px #593e2833;background:#eedfc1}
.eraser {margin-top:16px;background:linear-gradient(135deg,#fffdf4,#e3d7bc);border:1px solid #b8a17b;box-shadow:var(--key-shadow);border-radius:5px}
.eraser[aria-pressed="true"] {background:#d7e0ce;box-shadow:inset 0 2px 4px #2943393d,0 1px #fff9e6;transform:translateY(3px)}

/* The quilt's ancestors may translate for parallax, but must never rotate. */
.canvas-area {padding:20px 21px 16px;border:1px solid #aa8c60;border-radius:8px;background-color:#eee2c7;background-image:repeating-linear-gradient(0deg,#a38b5909 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#fffae544 0 1px,transparent 1px 4px);box-shadow:inset 0 0 0 5px #f8efd9,0 3px 0 #bca47b,0 7px 0 #8d704e,5px 15px 18px #5b3e293b}
.canvas-top {padding:13px 15px;margin:0 0 22px;border-radius:3px;background:linear-gradient(115deg,#fff9e9,#eadfc7);border:1px solid #c4b18d;box-shadow:inset 0 1px #fffdf4,0 3px 0 #cfba94,2px 7px 7px #5e422b26}
.canvas-top h2 {font-size:24px;text-shadow:0 1px #fff8e6}
.filled-count {background:var(--red-face);color:#f3d5aa;padding:7px 10px 9px;border-radius:5px;border:1px solid #9f6c49;box-shadow:inset 0 1px 0 #d78869,0 3px 0 #512c25,2px 6px 6px #67482c38;transform:rotate(3deg)}
.filled-count strong {color:#fff1c8;font-size:31px;text-shadow:1px 2px #4a2225}
.view-controls {gap:9px;margin-bottom:18px;justify-content:flex-end}
.view-switch {padding:4px;gap:5px;border-color:#a48d65;background:linear-gradient(#ae9570,#dbc6a0);box-shadow:inset 0 2px 4px #60442c55,0 1px #fff7dc}
.view-switch button {background:#e7dac0;box-shadow:inset 0 1px #fffae5,0 2px #a48a60;padding:8px 10px}
.view-switch button[aria-pressed="true"] {background:var(--ivory-face);box-shadow:inset 0 1px #fffdf2,0 3px 0 #9a7c51,1px 5px 4px #63472c3d;transform:translateY(-2px)}
.view-tools {gap:7px}
.view-tools button {border:1px solid #ae956c;background:var(--ivory-face);box-shadow:inset 0 1px #fffdf2,0 3px 0 #9d8158,1px 6px 5px #60402a2b;padding:8px 10px}
.view-tools button[aria-pressed="true"] {background:linear-gradient(135deg,#4c7565,#24483e);box-shadow:inset 0 1px #8caa8d,0 3px #18362d}
.quilt-stage,.scene-enabled .quilt-stage {border:7px ridge #a78c60;border-radius:9px;background:radial-gradient(ellipse at 30% 15%,#fbf3dc,#d6c39e);box-shadow:inset 5px 7px 16px #72563533,0 2px 0 #d5bd8c,0 7px 0 #6e5638,4px 15px 14px #5d43283b}
.quilt-3d {aspect-ratio:1.08}
.scroll-mount {padding:14px 8px;margin:5px 8px 12px}
.scene-enabled .scroll-mount {padding:0;margin:0}
.scene-caption {font-size:11px;color:#695639;margin:18px 0 12px}
.board-tools {margin:12px 0 18px;padding:9px;border:1px solid #ba9f72;border-radius:6px;background:linear-gradient(#e8d7b6,#cdb48c);box-shadow:inset 0 1px #fff0cb,0 3px 0 #9d7e54,3px 8px 8px #69462e2b;gap:12px}
.history-tools {gap:7px}
.history-tools .icon-button,.history-tools .text-button {border:1px solid #b9a079;border-radius:4px;background:var(--ivory-face);box-shadow:inset 0 1px #fffdf2,0 3px #a58b62,1px 5px 4px #62432c33}
.history-tools button:disabled {opacity:.45;box-shadow:inset 0 1px 3px #604c3533;transform:translateY(2px)}
.tool-divider {display:none}
.switch-label {color:#5d4b31;padding:0 3px}
.switch-track {box-shadow:inset 0 2px 4px #26372c55,0 1px #fff6d8}
.switch-track:before {background:linear-gradient(#fffdf0,#cebc95);box-shadow:0 1px 2px #1c342e66}
.feedback {border:1px solid #a4af8e;border-left:4px solid #607c5e;border-radius:4px;background:linear-gradient(115deg,#edf0de,#d5ddc6);box-shadow:inset 0 1px #fffef0,1px 3px 0 #b4b695,3px 6px 8px #5b45222b;padding:12px}
.feedback.warning {background:linear-gradient(115deg,#f6e6c8,#ead0a9);border-color:#b98b51}
.feedback.success {background:linear-gradient(115deg,#e9efdc,#c9d9bc)}
.work-actions {padding:17px 14px 20px;margin-top:22px;border:1px solid #bea477;border-radius:6px;background:var(--wood-grain),linear-gradient(135deg,#ead6ae,#d4bb8d);box-shadow:inset 0 1px #fff4d0,0 3px 0 #a0865d,0 7px 0 #806342,3px 12px 10px #5a3c282e;gap:11px;grid-template-columns:1fr 1fr}
.group-field {grid-column:1/-1;display:flex;align-items:center;gap:12px}
.group-label {margin:0;white-space:nowrap;text-shadow:0 1px #fff3d4}
.group-input {background:#f8edda;border:1px solid #ad9369;border-radius:4px;box-shadow:inset 2px 3px 6px #7c5c3433,0 1px #fff8df}
.primary-button,.export-button {width:100%;font-weight:600;min-height:48px;border-radius:5px;box-shadow:var(--key-shadow);background:var(--ivory-face)}
.primary-button {color:#fff2d6;background:var(--red-face);box-shadow:inset 0 1px 0 #db8e75,0 2px 0 #7e3431,0 6px 0 #4b2425,3px 10px 9px #5430244d;text-shadow:0 1px #532329}
.save-status {margin-top:18px;color:#68563c}
footer {margin:23px 0 0;padding:15px 0 19px;color:#493b2b;text-shadow:0 1px #edcca088;border-top:1px solid #8b653e55;box-shadow:inset 0 1px #efd1a444}
.footer-seal {background:var(--red-face);color:#ffeac0;border:1px solid #a8754b;box-shadow:0 2px 0 #672f27,2px 5px 4px #50372540;text-shadow:none}

dialog {border:7px ridge #a08355;border-top:9px ridge #97423c;border-radius:10px;background:linear-gradient(130deg,#fff9ea,#ebdec2);box-shadow:inset 0 0 0 1px #fef1d3,0 5px 0 #715537,0 12px 0 #3e3026,12px 30px 60px #15282080;padding:26px}
dialog::backdrop {background:#152d2877;backdrop-filter:blur(5px)}
.modal-heading {border-bottom:3px double #c3a779;padding-bottom:17px}
.modal-heading .icon-button {background:var(--ivory-face);border:1px solid #b79d73;box-shadow:inset 0 1px #fff9e8,0 3px 0 #ab8b5c,1px 5px 4px #61432726;margin-right:0}
.mini-quilt {transform:perspective(900px) rotateX(5deg) rotateZ(-2deg);box-shadow:0 4px #28453b,4px 10px 13px #5b412c4d}
.mini-quilt svg {box-shadow:1px 2px 3px #173a3255}
.help-rule {box-shadow:inset 0 1px #fffae3,0 3px #b6bb98,2px 6px 8px #5d48222b}
.toast {box-shadow:inset 0 1px #bc7d5c,0 5px 0 #442723,4px 12px 18px #23312666}
button:not(:disabled),a.primary-button {transition:transform .13s,box-shadow .13s,background-color .13s}
.primary-button:active,.export-button:active,.header-button:active,.view-tools button:active,.history-tools button:not(:disabled):active,.eraser:active {transform:translateY(4px);box-shadow:inset 0 1px 3px #57392333,0 1px 0 #8c704d}
@media(hover:hover) and (pointer:fine) {
  .pattern-button:hover,.color-button:hover {transform:translateY(-3px);box-shadow:0 5px 0 #ad9166,3px 11px 10px #5d402c40}
  .header-button:hover,.export-button:hover,.view-tools button:hover:not([aria-pressed="true"]) {background:linear-gradient(135deg,#fffdf5,#f5e6c9);transform:translateY(-2px);box-shadow:inset 0 1px #fff,0 4px 0 #ad9166,2px 10px 10px #543b2b3b}
  .primary-button:hover {background:linear-gradient(135deg,#b75a51,#883439);transform:translateY(-2px);box-shadow:inset 0 1px #dfa187,0 8px 0 #502526,3px 13px 11px #5430244d}
  .primary-button:active,.export-button:active,.header-button:active,.view-tools button:active {transform:translateY(4px);box-shadow:inset 0 1px 3px #57392333,0 1px 0 #8c704d}
}
@media(max-width:1100px) {
  body {padding:18px 18px 40px}.masthead-inner {padding:24px}.identity {padding:17px 22px;gap:15px}
  main {padding:26px 25px 0}.workspace {grid-template-columns:242px minmax(0,1fr);gap:28px}.materials-body {padding:21px 15px 20px 22px}
  .canvas-area {padding:17px 16px 14px}.canvas-top {padding:12px}.canvas-top h2 {font-size:22px}.view-tools button {padding:8px 7px}.view-switch button {padding:8px}
  .board-tools {padding:7px;gap:6px}.history-tools {gap:5px}.history-tools .text-button {padding:8px}.pattern-button {min-height:78px}
}
@media(max-width:900px) and (min-width:601px) {
  body {padding:15px 14px 36px}.masthead-inner {padding:21px 18px}.identity {padding:17px;gap:12px}.school-crest {padding:7px}.school-crest img {width:80px}h1 {font-size:40px}.school-name {font-size:13px}
  main {padding:23px 19px 0;border-width:6px}.workspace {grid-template-columns:210px minmax(0,1fr);gap:25px}.materials-body {padding:18px 12px 19px 18px}.panel-heading {padding:18px 12px 18px 19px}.panel-heading h2 {font-size:18px}
  .canvas-area {padding:14px 12px}.canvas-top {padding:11px;gap:8px}.canvas-top h2 {font-size:20px}.canvas-top h2 span {display:block;margin:4px 0 0}.filled-count {padding:6px 8px;display:block}.filled-count strong {font-size:27px}
  .view-controls {flex-wrap:wrap}.view-tools {margin-left:auto}.pattern-grid {gap:10px 6px}.pattern-button {min-height:69px}.color-button {padding:5px 2px;font-size:9px}.color-grid {gap:9px 5px}
  .board-tools {flex-wrap:wrap}.history-tools {flex:1}.switch-label {margin-left:auto}.work-actions {padding:14px 10px 18px}.group-field {display:block}.group-label {margin-bottom:8px}.scene-caption {font-size:10px}.quilt-3d {aspect-ratio:1}
}
@media(max-width:600px) {
  body {padding:12px 10px 32px}.masthead {border-width:5px;margin-bottom:25px;border-radius:7px}.masthead-inner {padding:15px 11px 20px;min-height:0;gap:15px;flex-wrap:wrap;justify-content:center}
  .identity {gap:13px;padding:17px 15px;width:100%;justify-content:center;transform:perspective(900px) rotateX(3deg) rotateY(-2deg)}
  .school-crest {padding:7px}.school-crest img {width:72px}.school-name {font-size:13px;letter-spacing:.5px}h1 {font-size:37px;letter-spacing:4px}.brand-description {font-size:10px;margin-top:7px}.brand-plaque {font-size:10px}
  .header-tools {width:100%;flex-direction:row;justify-content:space-between;gap:12px;align-items:center;padding:0 2px}.header-tools .header-actions {width:auto;flex-direction:row;gap:9px}.header-button {min-height:36px;font-size:10px;padding:8px 9px;gap:5px}.header-button .icon {width:13px;height:13px}
  .language-switch {padding:4px;gap:3px}.language-switch button {min-width:33px;min-height:29px;padding:5px 6px;font-size:10px}
  main {padding:20px 14px 0;border-width:5px;border-radius:11px}.workspace {gap:28px}.materials {width:calc(100% - 6px);margin:0 0 4px;transform:none;box-shadow:2px 2px 0 #f6ead0,4px 4px 0 #b6a079,6px 6px 0 #efe1c2,8px 9px 0 #23473b,12px 17px 13px #50392355}
  .panel-heading {padding:14px 16px 14px 20px}.chapter-mark {width:29px;height:32px}.panel-heading h2 {font-size:19px}.panel-heading p {font-size:9px}.materials-body {padding:18px 12px 17px 18px;gap:14px 12px}
  .color-grid {gap:9px 5px}.color-button {padding:5px 2px 4px;gap:4px;min-height:60px;font-size:8px}.color-swatch {height:34px}.color-label {padding-top:2px}.color-button[aria-pressed="true"]:after {width:16px;height:16px;right:-2px;font-size:10px}
  .pattern-field {margin:0;padding:0;border:0}.pattern-grid {gap:10px 5px;padding-top:2px}.pattern-button {min-height:55px;padding:5px 2px 4px;font-size:8px}.pattern-button svg {width:27px;height:27px}.pattern-groups {padding:3px;gap:3px;margin-bottom:9px}.pattern-groups button {font-size:9px;min-height:31px}
  .eraser {margin:1px 0 4px;min-height:40px}.canvas-area {padding:14px 11px 12px}.canvas-top {padding:12px 10px;gap:5px;margin-bottom:18px}.canvas-top h2 {font-size:21px}.canvas-top h2 span {font-size:9px;margin-left:4px}.canvas-top p {font-size:9px}.filled-count {padding:6px 7px;gap:1px}.filled-count strong {font-size:26px}.filled-count span {font-size:9px}
  .view-controls {gap:7px;margin-bottom:16px;flex-wrap:wrap}.view-switch {padding:3px;gap:3px}.view-switch button {min-height:33px;font-size:9px;padding:7px}.view-tools {gap:5px;margin-left:auto}.view-tools button {min-height:35px;font-size:9px;padding:7px;gap:4px}.view-tools .icon {width:13px;height:13px}
  .quilt-stage,.scene-enabled .quilt-stage {border-width:4px;border-radius:6px}.quilt-3d {aspect-ratio:1}.scene-caption {font-size:9px;text-align:left;margin-top:15px}.scroll-mount {padding:10px 2px;margin:6px}
  .board-tools {padding:8px;flex-wrap:wrap;margin:12px 0 16px;gap:7px}.history-tools {gap:6px}.history-tools .icon-button {width:34px;height:35px;min-height:35px}.history-tools .text-button {min-height:35px;padding:7px;font-size:10px}.switch-label {font-size:9px;min-height:35px;margin-left:auto}
  .feedback {font-size:10px;line-height:1.8;padding:10px}.work-actions {padding:13px 10px 18px;margin-top:20px;gap:13px 9px}.group-field {display:block}.group-label {font-size:14px;margin-bottom:9px}.group-input {height:43px;font-size:11px}.primary-button,.export-button {min-height:44px;font-size:11px;padding:10px 8px}.save-status {font-size:9px;line-height:1.8;margin-top:17px}
  footer {font-size:9px;gap:8px;margin-top:20px;padding:14px 0 17px}dialog {padding:19px;border-width:5px}.modal-heading h2 {font-size:20px}
}
@media(max-width:370px) {
  body {padding:10px 7px 28px}.masthead-inner {padding:13px 9px 18px}.identity {padding:15px 12px;gap:11px}.school-crest {padding:6px}.school-crest img {width:64px}.school-name {font-size:12px}h1 {font-size:32px}.header-tools {gap:6px;padding:0}.header-tools .header-actions {gap:7px}.header-button {padding:8px 6px;font-size:9px;gap:4px}.header-button .icon {width:12px;height:12px}.language-switch button {min-width:29px;font-size:9px;padding:4px}
  main {padding:17px 10px 0}.materials-body {padding:17px 10px 16px 16px;gap:13px 9px}.color-grid {gap:9px 4px}.color-swatch {height:29px}.color-button {font-size:7px;min-height:57px}.pattern-button svg {width:24px;height:24px}.pattern-button {min-height:52px}.pattern-groups button {font-size:8px}.canvas-area {padding:12px 9px}.canvas-top h2 {font-size:19px}.canvas-top h2 span {display:block;margin:3px 0 0}.view-controls {gap:9px}.view-tools button {font-size:9px}.scene-caption {font-size:9px}footer {font-size:8px;gap:7px}
}
@media(prefers-reduced-motion:reduce) {
  .identity {transform:none}.pattern-button:hover,.color-button:hover,.header-button:hover,.primary-button:hover,.export-button:hover,.view-tools button:hover {transform:none}
}