/* Logo workshop inside the TurtleBlock AI card. Uses the Studio Works tokens from styles.css. */
@media(min-width:901px){
 .project-turtle .project-grid{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);align-items:start}
 .project-turtle .project-copy .turtle-title{font-size:clamp(48px,5.8vw,104px)}
 .project-turtle .project-pitch{font-size:clamp(22px,2.1vw,34px)}
}
.turtle-lab.logo-lab{height:auto;min-height:0;aspect-ratio:auto;overflow:visible;background:#f6f1e7;box-shadow:10px 10px 0 var(--ink)}
.logo-lab .terminal-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;letter-spacing:.06em}
.logo-lab .terminal-line em{font-style:normal;opacity:.6}
.logo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.logo-stage{position:relative;aspect-ratio:1/1;border-right:2px solid var(--ink);background:#f6f1e7;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:10% 10%;background-position:center}
.logo-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.logo-stage canvas:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.logo-stage .coordinate-tag{pointer-events:none}
.logo-code{display:flex;flex-direction:column;min-width:0}
.logo-bar{display:flex;border-bottom:2px solid var(--ink)}
.logo-btn{flex:1 1 0;min-width:0;min-height:44px;border:0;border-right:2px solid var(--ink);background:transparent;font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:8px 6px}
.logo-btn:last-child{border-right:0}
.logo-btn:hover{background:var(--acid)}
.logo-btn-run{background:var(--ink);color:var(--paper);font-weight:bold}
.logo-btn-run span{color:var(--orange)}
.logo-btn-run:hover{color:var(--ink)}
.logo-btn:focus-visible,.logo-samples button:focus-visible,.logo-cheat summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.logo-samples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--ink);font:10px var(--mono)}
.logo-samples>span{letter-spacing:.08em;margin-right:2px;color:var(--orange);font-weight:bold}
.logo-samples button{min-height:34px;border:1px solid var(--ink);background:transparent;padding:4px 9px;font:11px var(--mono);text-transform:uppercase;cursor:pointer}
.logo-samples button:hover{background:var(--pool)}
.logo-samples button[aria-pressed="true"]{background:var(--acid);box-shadow:3px 3px 0 var(--ink)}
.logo-label{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:9px 12px 7px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper)}
.logo-label span{color:var(--orange)}
.logo-label small{font-size:10px;opacity:.65}
.logo-editor{flex:1 1 auto;display:block;width:100%;min-height:150px;margin:0;border:0;border-radius:0;resize:vertical;padding:4px 12px 12px;background:var(--ink);color:var(--paper);caret-color:var(--acid);font:13px/1.5 var(--mono);tab-size:2}
.logo-editor::selection{background:var(--acid);color:var(--ink)}
.logo-editor:focus{outline:none;box-shadow:inset 0 0 0 3px var(--acid)}
.logo-msg{margin:0;padding:9px 12px;min-height:38px;font:11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;border-top:2px solid var(--ink);background:var(--acid);overflow-wrap:anywhere}
.logo-msg::before{content:"> ";color:var(--orange);font-weight:bold}
.logo-msg.logo-msg-err{background:var(--orange);color:var(--ink);font-weight:bold}
.logo-msg.logo-msg-err::before{color:var(--ink)}
.logo-cheat{border-top:2px solid var(--ink);font:11px/1.45 var(--mono)}
.logo-cheat summary{cursor:pointer;min-height:40px;display:flex;align-items:center;padding:8px 12px;text-transform:uppercase;letter-spacing:.08em}
.logo-cheat summary:hover{background:var(--pool)}
.logo-cheat dl{display:grid;grid-template-columns:repeat(2,auto minmax(0,1fr));gap:5px 14px;margin:0;padding:4px 12px 14px}
.logo-cheat dt{font-weight:bold;white-space:nowrap}
.logo-cheat dd{margin:0;opacity:.8}
@media(max-width:900px){.logo-cheat dl{grid-template-columns:auto minmax(0,1fr)}}
@media(max-width:640px){
 .logo-body{grid-template-columns:minmax(0,1fr)}
 .logo-stage{border-right:0;border-bottom:2px solid var(--ink)}
 .turtle-lab.logo-lab{box-shadow:6px 6px 0 var(--ink)}
 .logo-editor{font-size:16px;min-height:200px}
 .logo-cheat dl{grid-template-columns:minmax(0,1fr)}
 .logo-cheat dt{white-space:normal;margin-top:6px}
}