:root{color-scheme:dark;--ink:#f7eedb;--muted:#b7adc0;--pink:#ef8bad;--gold:#ffd08a;--panel:#232237;--line:#454058}*{box-sizing:border-box}body{margin:0;background:#171827;color:var(--ink);font:15px/1.6 ui-sans-serif,system-ui,-apple-system,sans-serif}main{max-width:1180px;margin:auto;padding:26px 35px}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font:italic 27px Georgia,serif;color:var(--ink);text-decoration:none}.brand em{color:var(--pink)}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:700;color:var(--gold)}button{font:inherit;font-size:12px;border:1px solid #565067;color:var(--ink);background:#302d43;border-radius:8px;padding:9px 13px;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#4b3a55;transform:translateY(-1px)}button:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button[aria-pressed=true]{background:#ffd08a;color:#292138;border-color:#ffd08a}button:disabled{opacity:.45;cursor:default}button[hidden]{display:none}.intro{padding:38px 0 24px}.intro h1{font:56px/1.1 Georgia,serif;margin:12px 0;color:#ffead0}.intro>p:last-child{color:var(--muted);margin-bottom:0}#levels{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 24px}#levels button{min-width:38px;padding:7px 9px}#levels .done{border-color:#7bbaa6}#levels .current{box-shadow:0 0 0 2px var(--pink);color:var(--pink)}.workshop{display:grid;grid-template-columns: .85fr 1.15fr;gap:20px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:22px}.panelhead{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;letter-spacing:1.3px;color:var(--muted)}#levelname{color:var(--gold);letter-spacing:0;font:italic 17px Georgia,serif}.reference canvas{display:block;width:100%;max-width:340px;height:auto;margin:18px auto 14px}.reference p{color:#e6d8dd;margin-bottom:13px}.legend{font-size:11px;color:var(--muted)}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:6px}.tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px}.controlgroup{display:flex;align-items:center;gap:6px}.controlgroup>span{font-size:9px;letter-spacing:1px;color:var(--muted);margin-right:3px}.controlgroup button{padding:7px 10px}small{font-size:9px;opacity:.6}.table{border-radius:12px;background:#171827;margin-top:16px;overflow:hidden}#work{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}.counter{display:flex;justify-content:space-between;font-size:12px;color:var(--gold);margin-top:13px}#message{min-height:48px;font-size:13px;color:#d2c8d9;margin:9px 0}.actions{display:flex;flex-wrap:wrap;gap:7px}.actions #next{background:#ffd08a;color:#292138}.hanging{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-around;gap:20px;margin-top:24px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(90deg,#171827e8,#17182720),url('garden.webp') center/cover;overflow:hidden;padding:20px 40px;min-height:280px}.hanging h2{font:32px Georgia,serif}.hanging p:not(.eyebrow){max-width:230px;color:#e0d3dc}.hanging canvas{width:230px;height:230px;filter:drop-shadow(0 15px 12px #0008)}footer{font-size:11px;text-align:center;color:var(--muted);padding:32px 0 8px}a{color:var(--gold)}dialog{max-width:540px;width:calc(100% - 30px);border:1px solid #716078;border-radius:18px;background:#252237;color:var(--ink);padding:30px}dialog::backdrop{background:#0c0d1bd9;backdrop-filter:blur(5px)}dialog h2{font:30px Georgia,serif}#closehelp{float:right}.note{font-size:12px;color:#b9adc2}@media(max-width:760px){main{padding:18px}header>.eyebrow{display:none}.intro{padding:24px 0 20px}.intro h1{font-size:42px}.workshop{grid-template-columns:1fr}.reference{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}.reference .panelhead{grid-column:1/-1}.reference canvas{grid-row:2/4;margin:0;max-width:220px}.reference p{font-size:13px;margin:8px 0}.reference .legend{font-size:10px}.bench{padding:16px}.hanging{padding:20px;gap:10px}.hanging h2{font-size:25px}.hanging canvas{width:45%;height:auto}.hanging p:not(.eyebrow){font-size:12px}.tools{gap:12px}#message{min-height:42px}}