
.z7-section{padding:86px 0;background:linear-gradient(155deg,#e7f6ff,#f3eaff 57%,#fff7d7);color:#18234e;scroll-margin-top:85px}.z7-kicker{font-weight:900;letter-spacing:.13em;color:#6b46dc;font-size:.85rem}.z7-section h2{font-size:clamp(2rem,4vw,3.5rem);margin:12px 0}.z7-section h2 span{color:#7045d9}.z7-sub{max-width:780px;line-height:1.6;font-size:1.08rem}.z7-toolbar,.z7-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.z7-toolbar{margin:24px 0}.z7-toolbar label{display:flex;align-items:center;gap:8px;font-weight:800;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:0 3px 12px #23326718}.z7-section select,.z7-section input{border:2px solid #d9def2;background:#fff;color:#1a2754;border-radius:10px;padding:9px;font:inherit}.z7-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:20px;align-items:start}.z7-stagepane,.z7-codepane{background:#fff;border-radius:22px;padding:20px;box-shadow:0 12px 32px #18234e1c;border:2px solid #e5e7fa;min-width:0}.z7-panehead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px;font-size:1.03rem}.z7-panehead span{font-size:.81rem;font-weight:800;color:#6b46dc}#z7Canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;background:#162a67;border-radius:15px;touch-action:manipulation}.z7-msg{min-height:44px;font-size:.95rem;font-weight:800;padding:9px 2px;color:#45319c}.z7-section button,.z7-file{cursor:pointer;font:inherit;font-weight:800;border:2px solid #dfe4fa;background:#f4f7ff;color:#253260;padding:10px 13px;border-radius:12px;transition:transform .12s,background .12s}.z7-section button:hover,.z7-file:hover{transform:translateY(-2px);background:#e9ebff}.z7-section button:focus-visible,.z7-section select:focus-visible,.z7-section input:focus-visible{outline:3px solid #fbc62d;outline-offset:2px}.z7-section button:disabled{opacity:.5;cursor:default}.z7-section .z7-primary{background:#673ed1;color:white;border-color:#673ed1}.z7-section .z7-primary:hover{background:#512bb8}.z7-tips{margin-top:20px;background:#ecf9ff;border-radius:13px;padding:16px}.z7-tips p{margin:5px 0;line-height:1.5}.z7-hint{font-size:.9rem;line-height:1.5;color:#5c6786}.z7-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.z7-palette button{padding:11px 8px;font-size:.86rem;background:#eaf5ff;border-color:#b9e0ff}.z7-palette button:nth-child(n+5){background:#f2eaff;border-color:#dec6ff}.z7-program{padding:12px;min-height:130px;max-height:350px;overflow:auto;border-radius:14px;background:#f7f7ff;border:2px dashed #c9c5e9;margin-bottom:14px}.z7-codeblock{display:flex;align-items:center;gap:4px;border-radius:9px;background:#fff;box-shadow:0 2px 4px #15204512;padding:6px 8px;margin-bottom:7px}.z7-codeblock strong{flex:1;font-size:.86rem}.z7-codeblock button{font-size:.79rem;padding:3px 7px}.z7-save{display:grid;gap:7px;margin:22px 0 15px}.z7-save label{font-weight:800}.z7-library{border-top:1px solid #e6e8f5;padding-top:15px}.z7-library>strong{display:flex;justify-content:space-between}.z7-project{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0fa;padding:8px 0}.z7-project span{overflow:hidden;text-overflow:ellipsis}.z7-project>div{display:flex;gap:4px}.z7-project button{font-size:.76rem;padding:5px 7px}.z7-info{font-size:.8rem;line-height:1.45;color:#5b688b;margin:14px 0}.z7-file input{display:none}@media(max-width:850px){.z7-layout{grid-template-columns:1fr}.z7-stagepane,.z7-codepane{padding:14px}.z7-toolbar label{flex:1;justify-content:space-between}.z7-section{padding:62px 0}}@media(prefers-reduced-motion:reduce){.z7-section button{transition:none}}
