.hcs-wrap{--hcs-ink:#211b1a;--hcs-muted:#706562;--hcs-line:#eadfdb;--hcs-cream:#fbf7f4;--hcs-wine:#7b3946;--hcs-copper:#b76b44;direction:rtl;max-width:1180px;margin:30px auto 70px;padding:0 18px;color:var(--hcs-ink);font-family:inherit}.hcs-wrap *{box-sizing:border-box}.hcs-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;color:var(--hcs-muted);font-size:13px}.hcs-breadcrumb a{color:var(--hcs-wine);text-decoration:none}.hcs-hero{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;min-height:320px;padding:48px 54px;border-radius:30px;background:radial-gradient(circle at 12% 0,#dca27b55,transparent 34%),linear-gradient(128deg,#261d1c,#67313d 58%,#a7573c);color:#fff;box-shadow:0 24px 70px #4b2b2924}.hcs-hero>div:first-child{position:relative;z-index:2;max-width:760px}.hcs-kicker{color:#f4c9a9;font-size:13px;font-weight:800}.hcs-hero h1{margin:7px 0 12px;color:#fff;font-size:clamp(38px,6vw,64px);line-height:1.25}.hcs-hero p{margin:0;color:#f5e9e5;font-size:17px;line-height:2}.hcs-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hcs-badges span{padding:7px 11px;border:1px solid #ffffff33;border-radius:22px;background:#ffffff10;font-size:12px}.hcs-hero-orb{position:relative;display:grid;place-items:center;width:170px;height:170px;border:1px solid #ffffff2e;border-radius:50%;background:#ffffff10}.hcs-hero-orb i{position:absolute;width:115px;height:115px;border-radius:50%;background:conic-gradient(#1c1515,#60402f,#a75a36,#c99863,#8a7770,#713742,#1c1515);box-shadow:inset 0 0 0 16px #ffffff10}.hcs-hero-orb b{position:relative;font-size:28px;color:#fff}.hcs-workspace{display:grid;grid-template-columns:1.08fr .92fr;gap:18px;margin-top:20px}.hcs-panel,.hcs-preview,.hcs-result,.hcs-guide>*,.hcs-faq{border:1px solid var(--hcs-line);border-radius:22px;background:#fff;box-shadow:0 9px 34px #41231f0b}.hcs-panel,.hcs-preview{padding:25px}.hcs-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}.hcs-panel-head>span,.hcs-result-head>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#f3e4df;color:var(--hcs-wine);font-size:18px;font-weight:900}.hcs-panel-head h2{margin:0 0 4px;font-size:21px}.hcs-panel-head p{margin:0;color:var(--hcs-muted);font-size:13px}.hcs-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hcs-field>span{display:block;margin:0 3px 6px;color:#554b49;font-size:12px;font-weight:800}.hcs-field select{width:100%;height:48px;padding:0 12px;border:1px solid var(--hcs-line);border-radius:11px;background:var(--hcs-cream);color:var(--hcs-ink);font:inherit;outline:0}.hcs-field select:focus{border-color:var(--hcs-wine);box-shadow:0 0 0 3px #7b394612}.hcs-undertone{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;padding:15px;border:1px solid var(--hcs-line);border-radius:14px}.hcs-undertone legend{padding:0 7px;font-size:12px;font-weight:800}.hcs-undertone label{cursor:pointer}.hcs-undertone input{position:absolute;opacity:0}.hcs-undertone span{display:block;padding:7px 10px;border:1px solid var(--hcs-line);border-radius:9px;background:#fff;font-size:12px}.hcs-undertone input:checked+span{border-color:var(--hcs-wine);background:#7b3946;color:#fff}.hcs-calculate{width:100%;height:51px;border:0;border-radius:13px;background:linear-gradient(110deg,var(--hcs-wine),var(--hcs-copper));color:#fff;font:800 15px inherit;cursor:pointer;box-shadow:0 11px 24px #7b394629}.hcs-canvas-wrap{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:17px;background:#eee5e1}.hcs-canvas-wrap canvas{display:block;width:100%;height:100%;object-fit:cover}.hcs-canvas-loading{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#f1e9e6;color:var(--hcs-muted);text-align:center}.hcs-canvas-loading[hidden]{display:none}.hcs-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:13px}.hcs-swatches button{padding:7px 3px;border:1px solid var(--hcs-line);border-radius:10px;background:#fff;color:var(--hcs-muted);font:10px inherit;cursor:pointer}.hcs-swatches button i{display:block;width:25px;height:25px;margin:0 auto 5px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002}.hcs-swatches button.is-active{border-color:var(--hcs-wine);box-shadow:0 0 0 2px #7b394615;color:var(--hcs-wine);font-weight:800}.hcs-intensity{display:flex;align-items:center;gap:12px;margin-top:13px;color:var(--hcs-muted);font-size:12px}.hcs-intensity input{flex:1;accent-color:var(--hcs-wine)}.hcs-result{margin-top:20px;padding:27px}.hcs-result-head{display:flex;align-items:center;gap:12px}.hcs-result-head small{color:var(--hcs-copper);font-weight:800}.hcs-result-head h2{margin:3px 0 0;font-size:24px}.hcs-result-head button{margin-right:auto;padding:9px 13px;border:1px solid var(--hcs-line);border-radius:10px;background:#fff;color:var(--hcs-wine);cursor:pointer}.hcs-alert{margin:20px 0;padding:17px;border-radius:14px}.hcs-alert strong{display:block;margin-bottom:5px}.hcs-alert p,.hcs-alert ul{margin:5px 0 0;line-height:1.9}.hcs-alert.is-ok{background:#eef8f2;color:#17613b}.hcs-alert.is-warning{background:#fff5e9;color:#794515}.hcs-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.hcs-result-grid article{padding:16px;border:1px solid var(--hcs-line);border-radius:14px;background:var(--hcs-cream)}.hcs-result-grid small{display:block;color:var(--hcs-muted)}.hcs-result-grid b{display:block;margin-top:6px;font-size:17px}.hcs-result-grid p{margin:6px 0 0;color:var(--hcs-muted);font-size:11px;line-height:1.6}.hcs-steps{margin-top:20px;padding:20px;border-radius:16px;background:#261d1c;color:#fff}.hcs-steps h3{margin:0;color:#fff}.hcs-steps ol{margin-bottom:0;padding-right:20px;color:#eee1dd;line-height:2}.hcs-guide{display:grid;grid-template-columns:1.4fr .6fr;gap:17px;margin-top:20px}.hcs-guide>*{padding:26px}.hcs-guide article>span{color:var(--hcs-copper);font-size:12px;font-weight:800}.hcs-guide h2{margin:6px 0 10px}.hcs-guide p,.hcs-guide li{color:var(--hcs-muted);line-height:2}.hcs-guide aside{background:#fff8ed;border-color:#efddbb}.hcs-guide aside strong{color:#8a541d}.hcs-faq{margin-top:20px;padding:27px}.hcs-faq h2{margin-top:0}.hcs-faq details{padding:14px 0;border-top:1px solid var(--hcs-line)}.hcs-faq summary{cursor:pointer;font-weight:800}.hcs-faq p{color:var(--hcs-muted);line-height:2}@media(max-width:900px){.hcs-workspace,.hcs-guide{grid-template-columns:1fr}.hcs-result-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.hcs-wrap{margin-top:15px;padding:0 11px}.hcs-hero{min-height:auto;padding:30px 23px;border-radius:22px}.hcs-hero-orb{display:none}.hcs-hero h1{font-size:39px}.hcs-hero p{font-size:14px}.hcs-fields{grid-template-columns:1fr}.hcs-panel,.hcs-preview,.hcs-result,.hcs-faq{padding:18px}.hcs-swatches{grid-template-columns:repeat(5,1fr)}.hcs-swatches button span{display:none}.hcs-result-grid{grid-template-columns:1fr}.hcs-result-head{align-items:flex-start;flex-wrap:wrap}.hcs-result-head button{margin-right:50px}.hcs-guide>*{padding:20px}}
/* 19.20.3: resilient visual preview; the model remains visible even if canvas initialization is delayed. */
.hcs-before{position:absolute;z-index:4;right:12px;bottom:12px;padding:8px 12px;border:1px solid #fff8;border-radius:999px;background:#211b1acc;color:#fff;font:800 11px inherit;cursor:pointer;backdrop-filter:blur(8px);transition:.2s ease}.hcs-before:hover,.hcs-before.is-active{background:#fff;color:#7b3946;transform:translateY(-1px)}
.hcs-preview-controls{display:grid;gap:9px;margin-top:13px;padding:12px;border:1px solid #eadfdb;border-radius:14px;background:#fbf7f4}.hcs-preview-controls .hcs-intensity{margin:0}.hcs-preview-controls .hcs-intensity span{min-width:72px;font-weight:800;color:#554b49}
.hcs-canvas-wrap{border:1px solid #eadfdb}
.hcs-static-preview,.hcs-canvas-wrap canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hcs-static-preview{z-index:1}
.hcs-canvas-wrap canvas{z-index:2}
.hcs-canvas-loading{z-index:3;background:#f1e9e6dd;backdrop-filter:blur(4px)}