.ok-wrap{width:min(1200px,calc(100% - 36px));margin:26px auto 44px;color:#31241e}
.ok-wrap *{box-sizing:border-box}
.ok-back{display:inline-block;margin-bottom:18px;color:#8a222a;font-weight:750;text-decoration:none}
.ok-back:hover{text-decoration:underline}
.ok-hero{background:linear-gradient(128deg,#fff0d8 0%,#fff8ec 58%,#f7e6e0 100%);border:1px solid #e8cfb2;border-radius:25px;padding:24px 30px;margin-bottom:23px}
.ok-hero .pill{display:inline-flex;background:#f6dccc;border-radius:40px;padding:7px 15px;color:#7d2430;font-weight:800;font-size:.9rem}
.ok-hero h1{font-size:clamp(2.05rem,4vw,3.5rem);line-height:1.12;margin:15px 0 9px;color:#402923}
.ok-hero p{font-size:1.08rem;line-height:1.63;margin:0;max-width:82ch}
.ok-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.ok-studio{border:1px solid #eadad0;border-radius:22px;background:#fff;padding:20px;box-shadow:0 9px 23px rgba(70,42,23,.055);min-width:0}
.ok-studio h2{font-size:1.4rem;line-height:1.3;margin:0 0 14px}
.ok-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 16px}
.ok-tabs button{border:1px solid #edd6c7;border-radius:12px;background:#fff8ef;font:inherit;font-weight:750;padding:11px 6px;cursor:pointer;color:#472c28;line-height:1.3;font-size:.93rem}
.ok-tabs button.is-active,.ok-tabs button:hover{background:#95232e;color:#fff;border-color:#95232e}
.ok-svg-shell{border-radius:17px;border:1px solid #ded8d2;overflow:hidden;background:white}
#ok-drawing{line-height:0;aspect-ratio:800/570;width:100%;background:white}
#ok-drawing svg{width:100%;height:100%;display:block;touch-action:manipulation}
#ok-drawing .ok-paint{cursor:pointer;transition:fill .11s}
#ok-drawing .ok-paint:hover{filter:brightness(.97)}
.ok-title{margin:12px 0 7px;text-align:center;font-weight:800;color:#70312f}
.ok-note{font-size:.92rem;color:#5f5450;text-align:center;margin:2px 0 0;min-height:1.5em}
.ok-side{display:grid;gap:15px}
.ok-panel{background:#fff;border:1px solid #eadad0;border-radius:22px;padding:18px;box-shadow:0 9px 23px rgba(70,42,23,.05)}
.ok-panel h2{font-size:1.24rem;margin:0 0 12px}
.ok-panel p,.ok-panel li{font-size:.94rem;line-height:1.58;color:#594a44}
.ok-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ok-palette button{height:45px;border:2px solid #eee;border-radius:12px;cursor:pointer;position:relative;min-width:0;box-shadow:inset 0 0 0 1px #c7b5ad}
.ok-palette button.is-active{outline:3px solid #40332c;outline-offset:2px}
.ok-current{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:.91rem}
.ok-current span{height:25px;width:25px;border:1px solid #aaa;border-radius:8px;display:inline-block}
.ok-tools{display:grid;gap:9px}
.ok-tools button{width:100%;border:1px solid #d9c5ba;border-radius:12px;padding:11px 12px;font:inherit;font-weight:800;background:#fff7f0;color:#71312d;cursor:pointer;min-height:44px}
.ok-tools button:disabled{opacity:.43;cursor:default}
.ok-tools button.ok-primary{background:#a52b36;color:#fff;border-color:#a52b36}
.ok-tools button.ok-primary:hover{background:#7e202a}
.ok-tools button:hover:not(:disabled){filter:brightness(.97)}
.ok-instructions{background:#f1f6ea;border:1px solid #dce6d4;border-radius:21px;padding:18px 23px;margin:24px 0;line-height:1.68}
.ok-instructions h2{margin:0 0 8px;font-size:1.45rem}
.ok-instructions p{margin:0 0 9px}
.ok-instructions p:last-child{margin-bottom:0}
.ok-links{background:#fff4e4;border:1px solid #efdec6;border-radius:21px;padding:17px 22px}
.ok-links h2{margin:0 0 7px;font-size:1.3rem}
.ok-links p{margin:0}
@media(max-width:900px){.ok-layout{grid-template-columns:1fr}.ok-side{grid-template-columns:1fr 1fr}.ok-palette{grid-template-columns:repeat(6,1fr)}}
@media(max-width:620px){.ok-wrap{width:calc(100% - 24px);margin:12px auto 30px}.ok-hero{padding:20px 17px}.ok-studio{padding:12px}.ok-side{grid-template-columns:1fr}.ok-tabs{grid-template-columns:repeat(2,1fr)}.ok-tabs button{min-height:44px}.ok-palette{grid-template-columns:repeat(6,1fr)}.ok-panel{padding:14px}}
@media print{header,footer,.ok-back,.ok-hero,.ok-tabs,.ok-side,.ok-instructions,.ok-links,.ok-note,.ok-title{display:none!important}.ok-layout,.ok-wrap{display:block;width:100%;margin:0}.ok-studio{border:0;padding:0;box-shadow:none}#ok-drawing{width:100%;height:auto}#ok-drawing svg{width:100%}}