body{max-width:1000px;color:var(--text-main);background:var(--page-bg);margin:0 auto;padding:100px 24px 56px}h1{color:var(--text-main);letter-spacing:-.025em;text-align:left;margin:0 0 10px;font-size:clamp(30px,4.5vw,44px);font-weight:650}.description{color:var(--text-subtle);text-align:left;margin:0 0 28px;font-size:14px}.container{flex-direction:column;gap:32px;display:flex}.canvas-container{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;padding:16px;position:relative}canvas{background:var(--surface-soft);border:1px solid var(--line-soft);border-radius:var(--radius-md);cursor:pointer;max-width:100%;margin:0 auto;display:block}.controls{box-shadow:none;background:0 0;border:0;border-radius:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:0;display:grid}.control-group{min-width:0}h2{color:var(--text-soft);border-bottom:1px solid var(--line);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;padding-bottom:10px;font-size:11px;font-weight:600}.button-group{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}button{color:var(--surface-strong);background:var(--text-main);border:1px solid var(--text-main);border-radius:var(--radius-sm);font:inherit;cursor:pointer;padding:8px 12px;font-size:12.5px;font-weight:600;transition:opacity .16s,background-color .16s,border-color .16s}button:hover{opacity:.84}button.reset{color:var(--danger);border-color:var(--line);background:0 0}button.reset:hover{background:var(--danger-soft);border-color:var(--danger);opacity:1}.instructions,.info-panel{border:0;border-top:1px solid var(--line);box-shadow:none;background:0 0;border-radius:0;margin-top:0;padding:18px 0 0}.instructions{border-left:1px solid var(--line-strong);padding-left:12px}.instructions h3{color:var(--text-main);margin:0 0 8px;font-size:13px;font-weight:600}.instructions ul{color:var(--text-subtle);margin:0;padding-left:18px;font-size:12.5px;line-height:1.8}.info-item{border-bottom:1px solid var(--line-soft);justify-content:space-between;margin:0;padding:8px 0;display:flex}.info-item:last-child{border-bottom:0}.info-label{color:var(--text-subtle);font-size:12.5px;font-weight:400}.info-value{color:var(--text-main);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}@media (width<=760px){body{padding:90px 16px 40px}.controls{grid-template-columns:minmax(0,1fr);gap:20px}}