:root{color-scheme:light;--ink:#173e34;--muted:#586e61;--accent:#087f72}*{box-sizing:border-box}body{margin:0;background:#f4f3e9;color:var(--ink);font:16px/1.6 system-ui,sans-serif}.workshop{max-width:1220px;margin:auto;padding:24px;min-width:0}.hero{background:#103f35;color:#f5f4dc;padding:40px;border-radius:24px;position:relative;overflow:hidden}.hero:after{content:'';position:absolute;width:240px;height:240px;border:1px solid #cde9a82c;border-radius:50%;right:-90px;top:-80px;pointer-events:none}.hero h1{font-size:clamp(28px,5vw,52px);line-height:1.12;margin:12px 0 22px;letter-spacing:-.04em}.hero p{max-width:720px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:800;color:#d6e6a7;margin:0 0 12px}.eyebrow.dark{color:#517b58}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{font-size:12px;border:1px solid #b7d7a842;border-radius:30px;padding:5px 11px}.panel{background:white;border:1px solid #d5dfd0;border-radius:20px;padding:26px;margin:22px 0;min-width:0}h2{font-size:clamp(23px,3vw,30px);letter-spacing:-.025em;margin:0 0 12px}h3{font-size:18px;margin:0 0 15px}h4{font-size:26px;font-weight:750}.settings{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}.settings label{font-weight:700}.settings .hint{grid-column:1/-1;margin:0}.hint,.result-caption,.motion-note{font-size:14px;color:var(--muted)}.try{background:#eef4dd;padding:16px;border-radius:12px;border-left:3px solid #98b85e}.experiment-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:24px;align-items:start}.preview-panel,.controls-panel{min-width:0}.preview{min-height:290px;padding:20px;background:#edf2e8;border:1px solid #dce5d5;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.preview canvas,.preview svg{max-width:100%;width:100%;display:block}.preview canvas{background:#103b32;border-radius:12px}.service-card{width:100%;max-width:350px;display:flex;flex-direction:column;gap:14px;overflow-wrap:anywhere}.service-card .card-tag{font-size:11px;font-weight:800;letter-spacing:.09em}.service-card p{font-size:15px;margin:0}.service-card strong{font-size:clamp(20px,3vw,29px)}.service-card button{border:0;border-radius:10px;padding:13px 16px;min-height:44px;font-weight:700}.service-card small{font-size:12px;opacity:.75}.type-sample{width:100%;overflow-wrap:anywhere}.type-sample h4{font-size:1.2em;line-height:1.2}.type-sample p{margin:15px 0 0}.gradient-sample{width:100%;min-height:320px;border-radius:18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:22px;gap:12px}.gradient-sample>*{background:#123d35e8;color:white;border-radius:8px;padding:6px 12px;margin:0}.gradient-sample span{font-size:12px;font-weight:800}.gradient-sample h4{font-size:clamp(23px,3vw,34px)}.gradient-sample p{font-size:14px}.composition{position:relative;width:100%;height:350px;overflow:hidden;border:2px dashed #a0b59e;display:grid;place-items:center;border-radius:16px}.composition.with-grid{background-image:linear-gradient(#35614b18 1px,transparent 1px),linear-gradient(90deg,#35614b18 1px,transparent 1px);background-size:24px 24px}.composition-title{position:absolute;top:15px;left:15px;font-size:12px;font-weight:750;background:white;color:#23473d;padding:4px 8px;border-radius:6px}.composition-card{width:220px;max-width:80%;padding:24px 18px;border-radius:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 15px 30px #12382d26}.composition-card span{font-size:10px;font-weight:800}.composition-card strong{font-size:28px;line-height:1.1}.composition-card small{font-size:12px}.data-table{width:100%;overflow:auto}.data-table table{width:100%;border-collapse:collapse;font-size:13px;text-align:center;table-layout:fixed}.data-table th,.data-table td{border:1px solid #c9dac9;padding:7px 2px}.data-table caption{font-size:13px;color:#476a58;caption-side:top}.monitor-screen{width:100%;background:#103e34;color:#e3f1d4;padding:22px;border-radius:14px}.monitor-screen>p{font-size:13px;margin:12px 0 0}.monitor-badge{font-size:13px}.monitor-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.monitor-tiles span{display:block;font-size:11px}.monitor-tiles strong{font-size:28px;line-height:1.3;display:block}.play-controls,.inline-actions,.source-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.btn{min-height:44px;white-space:normal;font-weight:650}.btn-success{--bs-btn-bg:#137563;--bs-btn-border-color:#137563;--bs-btn-hover-bg:#0c5d4e;--bs-btn-hover-border-color:#0c5d4e}.btn-outline-success{--bs-btn-color:#17684f;--bs-btn-border-color:#a8c6ac;--bs-btn-hover-bg:#e0edda;--bs-btn-hover-color:#174e3c;--bs-btn-hover-border-color:#517f60}.form-control,.form-select{min-height:46px;max-width:100%;border-color:#bcd0bc}.form-select{white-space:normal}label{display:block;max-width:100%}pre{background:#103c33;color:#e4efce;padding:18px;border-radius:12px;overflow:auto;max-width:100%;font:12px/1.6 Consolas,monospace;white-space:pre}pre code{white-space:pre;color:inherit}summary{cursor:pointer;font-weight:650;min-height:44px;padding:10px 0}.preset-editor{margin-top:22px;background:#eff4e8;padding:20px;border-radius:14px}.scene-status{padding:14px 18px;background:#edf4df;border-radius:12px;font-size:14px;margin:20px 0 0}.repeat-download{display:block;min-height:44px;padding:10px 0;font-weight:650;color:#0b705a;overflow-wrap:anywhere}.repeat-download[hidden],[hidden]{display:none!important}footer{font-size:13px;color:#58705e;padding:0 8px 20px}a{color:#17694f}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #bb8c22!important;outline-offset:3px}.controls-panel [data-pane]{--tp-base-background-color:#153f35;--tp-base-shadow-color:#0000;--tp-base-border-radius:12px;--tp-base-font-family:system-ui,sans-serif;--tp-base-font-size:14px;--tp-container-unit-size:42px;--tp-container-horizontal-padding:10px;--tp-container-vertical-padding:6px;--tp-input-background-color:#e9f1e3;--tp-input-foreground-color:#183f34;--tp-button-background-color:#d5e6b2;--tp-button-foreground-color:#183f34;--tp-label-foreground-color:#e9f1dc}.controls-panel .tp-dfwv{width:100%}.controls-panel .tp-lblv_l{white-space:normal;font-size:13px;line-height:1.3}.controls-panel .tp-txtv_i{font-size:14px}.controls-panel .tp-lstv_s{font-size:13px}.controls-panel .tp-popv{max-width:calc(100vw - 48px)}.controls-panel .tp-rotv{font-size:13px}.controls-panel .tp-sldv_k{min-width:12px}.motion-note{margin-bottom:0}@media(max-width:760px){.workshop{padding:14px}.hero{padding:27px 22px;border-radius:18px}.panel{padding:20px;border-radius:16px}.experiment-layout{grid-template-columns:minmax(0,1fr)}.controls-panel{margin-top:5px}.settings{grid-template-columns:minmax(0,1fr)}.settings .hint{grid-column:auto}.preview{padding:16px}.monitor-screen{padding:16px}.monitor-tiles strong{font-size:25px}}@media(max-width:400px){.workshop{padding:8px}.hero{padding:23px 17px}.panel{padding:16px 12px}.preview{padding:10px}.source-actions,.play-controls,.inline-actions{flex-direction:column}.source-actions>*{width:100%}.preset-editor{padding:14px}.monitor-tiles{gap:6px}.monitor-tiles strong{font-size:22px}.service-card h4{font-size:24px}.composition-card{padding:20px 14px}.composition-card strong{font-size:25px}.controls-panel .tp-lblv_l{font-size:12px}.data-table table{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.controls-panel [data-pane]{--tp-blade-value-width:52%}.controls-panel .tp-lblv_l{padding-right:8px;hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:normal}

.controls-panel [data-pane]{--tp-input-background-color-hover:#f3f7ef;--tp-input-background-color-focus:#ffffff;--tp-input-background-color-active:#e3eddc}