@import url('theme.css');
/* The shared controls surround each tool's own interactive canvas. */
.tool-home{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:600}
.tool-home img{width:27px;height:27px}
.tool-heading{display:flex;align-items:center;gap:16px}
.tool-heading .tool-home{padding-right:16px;border-right:1px solid var(--line)}
.tool-geometry{background:var(--paper)}
.tool-geometry .tool-home{position:absolute;top:18px;left:20px;z-index:110;background:var(--paper);padding:8px 13px;border:1px solid var(--line);border-radius:8px}
.tool-geometry #instructions{top:79px;box-shadow:none;border:1px solid var(--line);background:var(--paper);color:var(--muted);padding:13px 16px;border-radius:10px}
.tool-geometry #ui-panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgb(45 53 36 / .09);backdrop-filter:none;padding:15px;gap:12px}
.tool-geometry button{background:var(--surface);color:var(--ink);border-radius:8px;font-size:13px;font-weight:500;padding:11px 0}
.tool-geometry button.active-mode{background:var(--accent);color:var(--ink)}
.tool-geometry button.active-view{background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px #9dab88}
.tool-geometry button.danger{background:var(--danger-soft);color:var(--danger)}
.tool-geometry #block-counter{background:var(--paper);border:1px solid var(--line);color:var(--ink);box-shadow:none;border-radius:8px;top:20px;font-size:12px}
.tool-geometry #count-val{color:var(--ink);font-variant-numeric:tabular-nums}
.tool-piano{--bg:var(--paper);--panel:var(--surface);--panel2:var(--white);--text:var(--ink);--active:var(--accent)}
.tool-piano .app{padding:26px 32px}
.tool-piano .top{margin-bottom:25px;gap:20px}
.tool-piano h1{font-size:23px;font-weight:700;letter-spacing:-.6px}
.tool-piano .current{border:none;border-radius:12px;padding:12px 24px}
.tool-piano .current strong{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.tool-piano .controls{padding:15px;gap:12px;border:0;border-radius:14px;margin-bottom:17px}
.tool-piano .control,.tool-piano .btn{border-radius:8px;border-color:var(--line);min-height:60px;font-weight:500;padding:10px 13px}
.tool-piano .control select option{background:var(--white);color:var(--ink)}
.tool-piano .btn.active{background:var(--accent);border-color:transparent;box-shadow:none}
.tool-piano .status{margin:0 1px 14px}
.tool-piano .shell{background:var(--surface);border-color:var(--line);border-radius:14px;padding:20px 16px 16px}
.tool-piano input[type=range]{accent-color:#526c2f}
.tool-piano .white.pressed{background:linear-gradient(#edf9ce,var(--accent))}
.tool-piano .black.pressed{background:linear-gradient(#d4f18f,#8aa84b);color:var(--ink)}
.tool-car{background:var(--paper);color:var(--ink)}
.tool-car #app{padding:12px;gap:12px;background:var(--paper)}
.tool-car .topbar{background:var(--paper);border:0;box-shadow:none;border-radius:0;padding:5px 8px 7px}
.tool-car .brand-icon{background:none;border-radius:0}
.tool-car .brand-icon img{width:34px;height:34px}
.tool-car .title{color:var(--ink);font-size:16px}
.tool-car .subtitle{color:var(--muted);font-weight:400}
.tool-car select,.tool-car button{background:var(--paper);border-color:var(--line);border-radius:8px;color:var(--ink);font-weight:500}
.tool-car .btn-reset{background:var(--accent);border-color:var(--accent)}
.tool-car .main{border-radius:16px;border:1px solid var(--line);box-shadow:none}
.tool-car .fab{background:var(--paper);border:1px solid var(--line);box-shadow:none;color:var(--ink);border-radius:10px;backdrop-filter:none}
.tool-car .fab.reset{background:var(--accent)}
.tool-car .fab.pause.active,.tool-car .fab.scene.active{background:var(--accent-soft)}
.tool-car .drawer{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:0 8px 30px rgb(45 53 36 / .1);backdrop-filter:none;border-radius:12px}
.tool-car .drawer label{color:var(--muted)}
.tool-car .portraitMask{background:var(--paper);color:var(--ink)}
@media(max-width:700px){.tool-piano .app{padding:18px 16px}.tool-piano .top{gap:15px}.tool-heading{gap:10px}.tool-heading .tool-home{padding-right:10px}.tool-home span{display:none}.tool-piano h1{font-size:18px}.tool-piano .current{min-width:125px}.tool-piano .controls{padding:11px;gap:8px}.tool-car #app{padding:8px;gap:8px}.tool-geometry #instructions{font-size:11px;padding:10px 12px}.tool-geometry #ui-panel{bottom:14px}}

.tool-piano{min-height:100dvh}
.tool-car .fabbar a.fab{text-decoration:none}
.tool-car .fabbar a.fab img{width:25px;height:25px}
.tool-car .pedal.gas{background:var(--accent);border-color:#a5bf71;color:var(--ink)}
.tool-car .pedal.brake{background:var(--danger-soft);border-color:#c79382;color:var(--danger)}
.tool-car .handbrake.active{background:var(--danger-soft);color:var(--danger)}
.tool-geometry #ui-panel button i{margin-right:5px;vertical-align:-.18em}