.ci-layout{grid-template-columns:1fr;align-items:start;gap:24px;display:grid}.ci-left{flex-direction:column;order:1;min-width:0;display:flex}.ci-right{flex-direction:column;order:0;gap:12px;min-width:0;display:flex}@media (width>=840px){.ci-layout{grid-template-columns:1.1fr 1fr}.ci-left{order:0}.ci-right{order:1}}.ci-canvas-container{border:1px solid var(--border);background:var(--bg-card);border-radius:8px;width:100%;overflow:hidden}.ci-canvas{width:100%;height:auto;display:block}.ci-mode-segmented{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);grid-template-columns:1fr 1fr;gap:0;margin-bottom:12px;display:grid;overflow:hidden}.ci-mode{min-height:calc(var(--control-h) - 6px);border:0;border-right:1px solid var(--border);background:var(--bg-surface);width:100%;color:var(--text);font-size:var(--control-fs);cursor:pointer;border-radius:0;padding:.3rem .55rem;line-height:1.1}.ci-mode:last-child{border-right:0}.ci-mode:not(.active):hover{background:var(--bg-hover)}.ci-mode.active{background:var(--accent);color:#fff;box-shadow:inset 0 -2px #0000002e}.ci-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:.55rem;margin-bottom:14px;display:grid}.ci-grid .field{color:var(--text-dim);gap:6px;font-weight:500;display:grid}.ci-grid .field label{display:block}.ci-grid .field label span{color:var(--accent);margin-left:2px;font-weight:700}.ci-grid .field input[type=range],.ci-grid .field input[type=number]{width:100%}#result-area .bd-row{border-bottom:1px dashed var(--border);padding:8px 0;display:block}#result-area .bd-row:last-child{border-bottom:0}#result-area .bd-row>span{color:var(--text-dim);margin-bottom:4px;font-size:.8rem;font-weight:600;display:block}#result-area .bd-row>strong{text-align:left;white-space:normal;word-wrap:break-word;word-break:break-word;display:block;overflow-x:visible}