.layout{grid-template-columns:minmax(0,1fr) 270px}.workspace>.tray-panel{flex-shrink:0;margin-top:9px;padding:8px 12px;border-radius:10px;display:grid;grid-template-columns:1fr auto auto;gap:3px 10px;align-items:center;background:#f8f8f0}.workspace>.tray-panel h2{display:none}.workspace>.tray-panel .eyebrow{font-size:8px}.workspace>.tray-panel .tray-instruction{grid-column:1;grid-row:2;font-size:9px!important;margin:0!important}.workspace #tray{grid-column:1/-1;grid-row:3;display:flex;justify-content:center;gap:9px;margin:4px 0}.workspace .tile{width:48px;height:48px;padding:1px}.workspace #remove{grid-row:1;grid-column:2}.workspace #changeMotif{grid-row:1;grid-column:3;font-size:10px;padding:4px 6px}.control-panel{border:1px solid var(--line);background:#fff;border-radius:15px;padding:16px}.control-panel .actions{flex-wrap:wrap;margin-top:16px;gap:8px}.control-panel .actions button{flex:1;padding:10px}.control-panel #check{flex-basis:100%}.control-panel #next{flex-basis:100%;margin:0!important}.control-panel #feedback{height:auto;min-height:68px;font-size:12px;margin-top:12px}.control-panel #conditions{margin-top:12px}.control-panel #conditions p{font-size:12px;line-height:1.45;margin:7px 0}.note{margin-top:10px}.note #sources{font-size:10px;padding:5px 0;color:var(--green)}#textileContext{display:block}#motifCredit{font-size:10px;line-height:1.4}.progress{display:flex;align-items:center;gap:10px}#levelPicker{max-width:230px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:white;font:inherit;font-size:11px}.diagonal-axis{position:absolute;inset:0;background:linear-gradient(45deg,transparent calc(50% - 1px),#225f50 calc(50% - 1px),#225f50 calc(50% + 1px),transparent calc(50% + 1px));pointer-events:none;z-index:2}.diagonal-axis.opposite{transform:scaleX(-1)}.axis-line.glide{background:transparent;border:1px dashed #225f50}.turn-centre.quarter{border-color:#b86b42}.slot.fixed:after{font-size:6px}.preview-head{gap:8px}#sourceInfo{border-top:1px solid var(--line);margin-top:20px}#sourceInfo a{color:var(--green)}
@media(max-height:650px) and (min-width:701px){.control-panel{padding:12px}.control-panel #conditions{margin-top:7px}.control-panel #conditions p{font-size:10px;margin:4px 0}.control-panel .actions{margin-top:8px;gap:5px}.control-panel .actions button{font-size:10px;padding:7px}.control-panel #feedback{font-size:10px;min-height:52px;margin-top:7px}.workspace .tile{width:40px;height:40px}.note{padding:10px}.note p{font-size:10px}.workspace>.tray-panel{margin-top:6px;padding:6px 10px}}
@media(max-width:700px){.layout{display:flex;flex-direction:column}.workspace>.tray-panel{padding:6px 8px;gap:2px 6px}.workspace>.tray-panel .eyebrow{font-size:7px;letter-spacing:.3px}.workspace>.tray-panel .tray-instruction{display:none}.workspace #tray{grid-column:1/-1;gap:5px;margin:3px 0}.workspace .tile{width:clamp(27px,8vw,42px);height:clamp(27px,8vw,42px)}.workspace #remove,.workspace #changeMotif{font-size:8px;padding:2px 4px}.progress{flex-direction:column;align-items:flex-end;gap:3px}#levelPicker{font-size:9px;padding:4px;max-width:145px}.intro h1{font-size:19px}.intro .eyebrow{max-width:160px;line-height:1.4}.control-panel{padding:8px 10px;display:grid;grid-template-columns:1fr;gap:3px}.control-panel>.eyebrow{display:none}.control-panel #conditions{margin:0;display:flex;gap:5px;flex-wrap:wrap}.control-panel #conditions p{font-size:8px;margin:0;line-height:1.3}.control-panel .actions{margin-top:3px;flex-wrap:nowrap;gap:5px}.control-panel .actions button{font-size:10px;padding:6px;flex:1!important;flex-basis:auto!important}.control-panel #feedback{min-height:27px;font-size:9px;margin-top:3px;padding:4px 6px}.note,.footnote{display:none}aside{flex-shrink:0}.board-area{padding:10px;gap:10px}.goal{font-size:10px}.workspace{padding:10px}}
@media(min-width:701px) and (max-height:450px){.layout{grid-template-columns:minmax(0,1fr) 250px}.control-panel{padding:9px}.control-panel #conditions p{font-size:9px}.control-panel .actions button{padding:5px;font-size:9px}.control-panel #feedback{min-height:36px;font-size:9px}.workspace .tile{width:30px;height:30px}.workspace>.tray-panel .tray-instruction{display:none}}
.diagonal-axis{transform:scaleX(-1)}.diagonal-axis.opposite{transform:none}
#steps{display:none!important}.intro>div:first-child{min-width:210px}.progress{flex-shrink:0}.workspace:not(.wallpaper-mode) #board{width:min(350px,calc(100cqh - 36px),75cqw)}
@media(max-width:700px){.intro>div:first-child{min-width:0}.progress{max-width:155px}}
@media(max-width:700px) and (max-height:620px){.intro{display:flex;justify-content:flex-end;margin-bottom:4px}.intro>div:first-child{display:none}.progress{flex-direction:row;max-width:100%;gap:8px}#levelPicker{max-width:230px;font-size:9px}}
@media(min-width:701px) and (max-height:450px){.intro{display:flex;justify-content:flex-end;margin-bottom:4px}.intro>div:first-child{display:none}.progress{font-size:9px}#levelPicker{font-size:9px;padding:4px}}