.ownWebsite{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center}.ownWebsite p,.colorIntro p{max-width:720px;line-height:1.7;color:var(--muted,#68757a)}.ownAddress{padding:32px;border:1px solid #dce6e2;border-radius:20px;display:grid;gap:12px;background:#f4faf7;color:#183b30}.ownAddress strong{font-size:clamp(18px,2vw,27px);overflow-wrap:anywhere}.ownAddress b{color:#087c63}.ownAddress i{font-size:13px;font-style:normal;margin:15px 0;color:#6c7a73}.ownAddress small{margin-top:16px;line-height:1.7}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700;color:#087c63}.colorIntro{margin-bottom:30px}.colorStudio{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px}.colorControls{border:1px solid #dce6e2;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px;background:#fff;color:#19332b}.colorControls label{font-weight:650;font-size:14px}.colorControls p{font-size:13px;line-height:1.6;color:#65776e}.colorControls input[type=range]{width:100%;accent-color:var(--preview-accent,#087c63);background:linear-gradient(to right,red,#ff0,#0f0,cyan,blue,magenta,red);border-radius:20px}.colorValue{display:flex;align-items:center;gap:14px}.colorValue input{width:52px;height:40px;padding:2px;border:1px solid #dce6e2;border-radius:7px;background:white}.colorValue output{font-family:monospace;font-size:16px}.colorPresets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.colorPresets button{padding:10px 8px;border:1px solid #dde6e1;border-radius:8px;background:white;color:#33463e;cursor:pointer}.colorPresets button:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--swatch);margin-right:6px}.colorPresets button[aria-pressed=true]{border-color:var(--swatch);outline:1px solid var(--swatch)}.colorPreview{min-width:0;border:1px solid #dce6e2;border-radius:16px;overflow:hidden;box-shadow:0 18px 55px #16352610;background:#f5f7f8}.previewAddress{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 18px;font-size:12px;background:white;border-bottom:1px solid #dce6e2;color:#53695e}.previewAddress>span:first-child{color:#b6c5bd;letter-spacing:3px}.colorViewport{height:590px;overflow:auto}.colorViewport iframe{border:0;width:1120px;height:820px;transform-origin:top left;display:block;zoom:.72}.colorControls :focus-visible{outline:3px solid #336bd4;outline-offset:3px}
@media(max-width:900px){.ownWebsite,.colorStudio{grid-template-columns:1fr}.colorControls{display:grid;grid-template-columns:1fr 1fr;align-items:center}.colorControls p{grid-column:1/-1}.colorViewport{height:520px}.colorViewport iframe{zoom:.64}.previewAddress{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.colorStudio *{scroll-behavior:auto!important;transition:none!important}}

.colorFilm{margin:0;border:1px solid #dce6e2;border-radius:18px;overflow:hidden;background:#f5f7f8;box-shadow:0 18px 55px #16352610}.colorFilmFrames{position:relative;aspect-ratio:1120/820}.colorFilmFrame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1s ease}.colorFilmFrame.is-current{opacity:1}.colorFilmPause{font:inherit;color:#53695e;background:transparent;border:1px solid #dce6e2;border-radius:8px;padding:6px 10px;cursor:pointer}.colorFilmPause:focus-visible{outline:3px solid #2563eb;outline-offset:2px}@media(prefers-reduced-motion:reduce){.colorFilmFrame{transition:none}}@media(max-width:560px){.colorFilm .previewAddress{padding:10px;gap:8px;font-size:11px}.colorFilm .previewAddress>span:first-child{display:none}.colorFilmPause{margin-left:auto}}

.colorFilm{width:60%;margin-inline:auto}
.colorFilmFrame{transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.colorFilmFrame{transition:none}}