:root{--primary:#2563eb;--primary-dark:#1d4ed8;--surface:#ffffff;--surface-muted:#f4f6fb;--border:#e2e8f0;--text-main:#0f172a;--text-muted:#64748b;--shadow-soft:0 20px 45px rgba(15,23,42,0.08);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.mag-type-native{display:block;width:100%;}
.mag-segment-row{display:none;gap:0.35rem;overflow-x:auto;padding-bottom:0.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap: wrap;}
.mag-segment-row::-webkit-scrollbar{height:4px;}
.mag-segment-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
@media (min-width:768px){.mag-type-native{display:none;}.mag-segment-row{display:flex;}}
.mag-atelier{margin:0 0 2.5rem;}
.mag-stage-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;}
.mag-layout{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;}
@media (min-width:900px){.mag-layout{grid-template-columns:minmax(260px,22rem) minmax(0,1fr);min-height:min(70vh,640px);}}
.mag-panel-title{margin:0 0 1rem;font-size:0.68rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);}
.mag-panel-title--result{color:var(--primary);}
.mag-panel--options{padding:1.15rem 1.2rem;background:var(--surface-muted);border-bottom:1px solid var(--border);}
@media (min-width:900px){.mag-panel--options{border-bottom:none;border-right:1px solid var(--border);}}
.mag-panel--result{padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:1rem;min-width:0;background:var(--surface);}
.mag-canvas-wrap{position:relative;flex:1;min-height:200px;background:linear-gradient(145deg,#f8fafc 0%,#eef2f7 45%,#f1f5f9 100%);border:1px solid var(--border);border-radius:14px;padding:clamp(0.75rem,2vw,1.15rem);margin:0;}
.mag-canvas-wrap canvas{display:block;width:100%;max-width:min(100%,560px);height:auto;aspect-ratio:1/1;margin:0 auto;border-radius:12px;box-shadow:0 10px 32px rgba(15,23,42,0.14);border:1px solid rgba(15,23,42,0.06);}
.mag-result-actions{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:flex-start;}
.mag-result-actions button{flex:1;min-width:min(100%,120px);max-width:180px;}
.mag-btn-primary,.mag-btn-secondary,.mag-btn-ghost{border-radius:999px;font-weight:600;font-size:0.875rem;padding:0.65rem 1.1rem;border:1px solid transparent;cursor:pointer;transition:transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease;}
.mag-btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,0.25);}
.mag-btn-primary:hover{transform:translateY(-1px);}
.mag-btn-secondary{background:var(--surface);color:var(--text-main);border-color:var(--border);}
.mag-btn-secondary:hover{border-color:var(--primary);color:var(--primary);}
.mag-btn-ghost{background:transparent;color:var(--text-main);border-color:var(--border);}
.mag-btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.mag-control-deck{padding:0;display:flex;flex-direction:column;gap:1.25rem;}
.mag-segment-label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem;}
.mag-seg{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:0.45rem 0.85rem;font-size:0.8125rem;white-space:nowrap;cursor:pointer;flex-shrink:0;}
.mag-seg[aria-pressed="true"],.mag-seg.is-active{background:var(--primary);color:#fff;border-color:var(--primary);}
.mag-grid-2{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:480px){.mag-grid-2{grid-template-columns:1fr 1fr;}}
.mag-field{display:flex;flex-direction:column;gap:0.35rem;}
.mag-field label{font-size:0.8125rem;font-weight:600;color:var(--text-main);}
.mag-field select,.mag-field input[type="range"]{width:100%;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-main);padding:0.5rem 0.65rem;font-size:0.875rem;}
.mag-field select:focus,.mag-field input[type="range"]:focus{outline:2px solid rgba(37,99,235,0.35);outline-offset:2px;}
.mag-density-row{display:flex;align-items:center;gap:0.75rem;margin-top:0.15rem;}
.mag-density-row input[type="range"]{flex:1;min-width:0;}
.mag-density-out{font-variant-numeric:tabular-nums;font-weight:700;color:var(--primary);min-width:2ch;}
.mag-presets{border-top:1px solid var(--border);padding-top:1rem;}
.mag-presets-head{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:0.65rem;}
.mag-chip-wrap{display:flex;flex-wrap:wrap;gap:0.45rem;}
.mag-chip{border-radius:10px;border:1px dashed var(--border);background:var(--surface);color:var(--text-main);font-size:0.8125rem;padding:0.4rem 0.75rem;cursor:pointer;}
.mag-chip:hover{border-style:solid;border-color:var(--primary);color:var(--primary);}
.mag-prose{margin:2rem 0 2.5rem;}
.mag-prose h2{font-size:clamp(1.25rem,3vw,1.5rem);margin:0 0 0.75rem;line-height:1.25;color:var(--text-main);}
.mag-prose h3{font-size:1.05rem;margin:1.75rem 0 0.5rem;color:var(--text-main);}
.mag-prose p{color:var(--text-muted);line-height:1.65;margin:0 0 1rem;}
.mag-prose p.mag-lead{font-size:1.05rem;color:var(--text-main);}
.mag-prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
.mag-prose a:hover{color:var(--primary-dark);}
.mag-callout{margin:1.5rem 0;padding:1rem 1.15rem;border-left:4px solid var(--primary);background:var(--surface-muted);border-radius:0 12px 12px 0;}
.mag-callout p{margin:0;font-size:0.9375rem;color:var(--text-muted);}
.mag-dl{margin:1rem 0 1.5rem;}
.mag-dl-pair{display:grid;gap:0.25rem 1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.mag-dl-pair:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
@media (min-width:768px){.mag-dl-pair{grid-template-columns:minmax(140px,200px) 1fr;align-items:start;}}
.mag-dl-pair dt{font-weight:700;font-size:0.8125rem;color:var(--text-main);}
.mag-dl-pair dd{margin:0;font-size:0.9rem;color:var(--text-muted);line-height:1.55;}
.mag-table-wrap{overflow-x:auto;margin:1rem 0 2rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.mag-table{width:100%;border-collapse:collapse;font-size:0.875rem;}
.mag-table th,.mag-table td{padding:0.65rem 0.85rem;text-align:left;border-bottom:1px solid var(--border);}
.mag-table th{background:var(--surface-muted);color:var(--text-main);font-weight:600;}
.mag-table tr:last-child td{border-bottom:none;}
.mag-table td{color:var(--text-muted);}
.mag-table a{color:var(--primary);}