:root { color-scheme: light; font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; color: #243c3a; background: #f5f2e9; line-height: 1.55; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #a4422c; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.workshop { max-width: 1180px; padding: 22px clamp(18px, 4vw, 46px) 32px; margin: auto; }
.header { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #d6d4c7; padding-bottom: 18px; }
.brand-mark { width: 45px; color: #30625a; flex: none; }
.brand-mark svg { display: block; width: 100%; }
.eyebrow, .section-label { margin: 0; font-size: .82rem; font-weight: 700; color: #49665c; letter-spacing: .02em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.25; }
.back-link { margin-left: auto; min-height: 46px; display: flex; align-items: center; color: #24473b; font-weight: 700; }
.quiet-button { min-height: 46px; padding: 8px 16px; border: 1px solid #93aaa0; border-radius: 8px; background: #fff; color: #243c3a; font-weight: 700; }
.back-link[hidden] + .quiet-button { margin-left: auto; }
.intro { padding: 32px 0 23px; }
.intro h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); letter-spacing: -.04em; margin-bottom: 6px; }
.intro p, .control-intro, .options p { color: #52665f; margin-bottom: 0; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr); align-items: stretch; gap: 18px; }
.board-card, .control-card, .options, .help { background: #fffdf8; border: 1px solid #d7d8cc; border-radius: 14px; }
.board-card { min-width: 0; padding: clamp(20px, 3vw, 28px); background: #e8eee7; }
.board-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.board-heading h2, .control-card h2, .options h2 { margin: 2px 0 0; font-size: 1.2rem; }
.progress { color: #31544d; background: #fffdf8; border: 1px solid #c8d6c9; border-radius: 999px; padding: 5px 12px; font-weight: 700; white-space: nowrap; }
.scene { --tile: clamp(43px, 10vw, 75px); position: relative; height: calc(var(--tile) * 4.5); display: grid; place-items: center; perspective: 900px; overflow: visible; }
.net { position: relative; width: var(--tile); height: var(--tile); transform: rotateX(27deg) rotateZ(-17deg); transform-style: preserve-3d; z-index: 1; }
.scene-shadow { position: absolute; width: calc(var(--tile) * 3.6); height: calc(var(--tile) * 1.5); border-radius: 50%; background: #9bb5a6; opacity: .24; filter: blur(18px); transform: translateY(75px); }
.sheet { position: absolute; width: var(--tile); height: var(--tile); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.65,.25,1); }
.sheet.north { bottom: 100%; left: 0; transform-origin: bottom center; }
.sheet.south { top: 100%; left: 0; transform-origin: top center; }
.sheet.west { right: 100%; top: 0; transform-origin: right center; }
.sheet.east { left: 100%; top: 0; transform-origin: left center; }
.sheet.north.folded { transform: rotateX(-90deg); }
.sheet.south.folded { transform: rotateX(90deg); }
.sheet.west.folded { transform: rotateY(90deg); }
.sheet.east.folded { transform: rotateY(-90deg); }
.surface { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; border: 1px solid #aa7959; background: #ead0a7; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2); color: #5c452f; text-align: center; font-size: clamp(.56rem, 1.8vw, .72rem); font-weight: 700; backface-visibility: visible; }
.surface::before { content: ''; position: absolute; inset: 5px; border: 1px dashed rgba(118,82,52,.35); pointer-events: none; }
.surface span { position: relative; }
.base-surface { background: #d9b98a; }
.scene-caption { margin: 0 0 13px; text-align: center; color: #4e695e; font-size: .95rem; }
.status { min-height: 58px; display: flex; align-items: center; padding: 12px 15px; border-radius: 8px; background: #fffdf8; color: #1d4740; font-weight: 700; }
.control-card { padding: 25px; }
.control-intro { font-size: .96rem; margin: 7px 0 17px; }
.face-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.face-button, .secondary, .net-buttons button { min-height: 52px; border-radius: 8px; border: 1px solid #809e90; background: #f8fbf6; color: #224a42; padding: 10px 12px; font-weight: 700; }
.face-button[aria-pressed='true'] { background: #315e53; color: white; border-color: #315e53; }
.face-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.face-state { font-size: .8rem; font-weight: 400; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.secondary { background: white; min-height: 44px; font-size: .93rem; }
.verdict { margin-top: 16px; }
.verdict p { color: #344f47; margin: 0 0 8px; font-size: .9rem; }
.wall-panel { border-top: 1px solid #e0e1d7; margin-top: 23px; padding-top: 19px; }
.wall-panel h3 { margin-bottom: 3px; font-size: 1rem; }
.wall-panel p { color: #52665f; font-size: .9rem; margin-bottom: 11px; }
.wall-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 0; list-style: none; }
.wall-list li { background: #f2f1e9; padding: 8px; border-radius: 5px; font-size: .82rem; }
.wall-list li.filled { background: #dcece1; font-weight: 700; }
.options { margin-top: 18px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.options p { font-size: .93rem; margin-top: 5px; }
.net-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.net-buttons button[aria-pressed='true'] { background: #315e53; border-color: #315e53; color: #fff; }
.help { margin-top: 12px; padding: 16px 22px; }
.help summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.help summary::before { content: '+'; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; background: #e8eee7; border-radius: 50%; font-size: 1.1rem; }
.help[open] summary::before { content: '−'; }
.help-content { color: #344f47; max-width: 70ch; }
.help-content li { margin-bottom: 8px; }
footer { padding: 24px 0 0; text-align: center; color: #4c645b; font-size: .86rem; }
.no-script { padding: 1em; text-align: center; color: #7f3326; }
@media (max-width: 760px) { .workspace { grid-template-columns: 1fr; } .options { align-items: flex-start; flex-direction: column; } .intro { padding-top: 24px; } }
@media (max-width: 480px) { .header { flex-wrap: wrap; } .back-link { margin-left: 0; } }
@media (max-width: 400px) { .wall-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }
.practice { margin-top: 18px; }
.practice .options { margin-top: 8px; border: 0; padding: 12px 0 0; background: none; }
@media (max-width: 760px) { .practice .options { align-items: flex-start; } }