@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#213c38;--muted:#62746e;--paper:#f5f4ee;--green:#225f50;--line:#dce2d9;--gold:#cd923b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:9px;padding:11px 16px;color:var(--ink)}button:hover{border-color:var(--green);background:#f0f6f1}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #d79d43;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:var(--green);color:white;border-color:var(--green);font-weight:600}.primary:hover{background:#184a3e;color:white}.quiet{background:transparent;border-color:transparent}.brand{font-size:27px;color:var(--green);text-decoration:none;display:flex;gap:10px;align-items:center}.brand span{font-size:19px;font-weight:700}header{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 6%}.badge,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px}.badge{color:var(--muted)}main{max-width:1250px;margin:auto;padding:38px 40px 55px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.intro h1{font-family:Manrope,sans-serif;font-size:46px;letter-spacing:-2px;margin:8px 0}.intro p:not(.eyebrow){color:var(--muted);margin:9px 0}.progress{text-align:right;color:var(--muted);font-size:13px}#steps{display:flex;gap:8px;margin-top:14px}.step{width:33px;height:6px;background:#dce2d9;border-radius:5px;padding:0;border:0}.step.active{background:var(--gold)}.step.done{background:var(--green)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:25px}.workspace,.tray-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:27px}.level-head{display:flex;justify-content:space-between;align-items:center}h2{font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-.5px;margin:7px 0 12px}.eyebrow{color:var(--muted);margin:0}.goal{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 20px}.board-area{background:#f4f6f0;border-radius:13px;padding:30px;display:flex;justify-content:center;overflow:hidden;min-height:300px;align-items:center}#board{position:relative;display:grid;gap:5px;width:min(100%,390px)}.slot{padding:0;border:1px dashed #cbd5c8;border-radius:7px;aspect-ratio:1;min-width:0;position:relative;background:#fff9;touch-action:none}.slot svg,.tile svg{display:block;width:100%;height:100%;pointer-events:none}.slot.filled{border:1px solid #d5dcd0;background:#fff}.slot.fixed{background:#e9efe5;border-style:solid}.slot.fixed:after{content:'●';position:absolute;font-size:7px;right:5px;bottom:3px;color:#667d60}.slot.target{outline:3px solid var(--gold);background:#fff2cc}.slot.error{outline:3px solid #ba654d}.slot.partner{outline:3px solid #d6a342}.axis-line{position:absolute;background:var(--green);opacity:.8;pointer-events:none;z-index:2}.axis-line.vertical{width:2px;left:calc(50% - 1px);top:-15px;height:calc(100% + 30px)}.axis-line.horizontal{height:2px;top:calc(50% - 1px);left:-15px;width:calc(100% + 30px)}.turn-centre{position:absolute;width:21px;height:21px;left:calc(50% - 10px);top:calc(50% - 10px);border:3px solid var(--green);background:white;border-radius:50%;z-index:3;pointer-events:none}.legend{display:flex;justify-content:center;gap:20px;font-size:10px;color:var(--muted);margin:16px 0 23px}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#667d60}.legend .axis{border-radius:0;width:12px;height:2px;background:var(--green)}.actions{display:flex;gap:9px}.actions .primary{margin-right:auto}.actions .primary span{margin-left:15px}#feedback{margin-top:15px;font-size:14px;line-height:1.6;padding:0}#feedback:not(:empty){padding:13px 16px;border-radius:9px;background:#f2f5ed}#feedback.success{background:#e6f3e9}.tray-panel p:not(.eyebrow){font-size:13px;line-height:1.6;color:var(--muted)}#tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.tile{aspect-ratio:1;padding:3px;background:#faf8f0;touch-action:none}.tile.selected{outline:3px solid var(--gold);background:#fff2cc}.small{font-size:11px!important}.note{margin-top:20px;background:#e7ebdf;padding:22px;border-radius:14px}.note>span{color:var(--gold);font-size:25px}.note h3{font-size:15px;margin:8px 0}.note p{font-size:13px;line-height:1.7;color:#52665b;margin-bottom:0}.footnote{font-size:10px;line-height:1.8;color:var(--muted);padding:8px}.ghost{position:fixed;width:75px;height:75px;pointer-events:none;z-index:20;opacity:.88;background:#fff;border:2px solid var(--gold);border-radius:8px;box-shadow:0 8px 25px #213c3833}.ghost svg{width:100%;height:100%}#reflection{margin-top:18px;border-top:1px solid var(--line);padding-top:20px}#reflection label{font-weight:600;font-size:14px}textarea{display:block;width:100%;margin:10px 0;border:1px solid var(--line);border-radius:9px;padding:12px;font:inherit}#reflection p{font-size:11px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:20px;max-width:520px;padding:30px;color:var(--ink)}dialog::backdrop{background:#12372b66}dialog p,dialog li{line-height:1.7;font-size:14px}dialog li{margin-bottom:10px}.close{float:right}.overlay{position:absolute;inset:0;opacity:.42;pointer-events:none;background:#fff}body.dragging{user-select:none}#remove.active{background:#fff2cc;border-color:var(--gold)}@media(max-width:800px){main{padding:25px 17px}.layout{grid-template-columns:1fr}.intro h1{font-size:34px}.badge{display:none}.workspace{padding:19px}.board-area{padding:25px 17px}.legend{gap:10px;font-size:9px}.actions{flex-wrap:wrap}.actions button{padding:10px 12px}.tray-panel{padding:20px}#tray{max-width:350px}.progress{font-size:11px}.step{width:18px}header{padding:0 18px;height:70px}.brand span{font-size:16px}}