/* Zakres tylko warsztatów HTML/CSS INF.03. */
.web-lab{border:1px solid #31546a;border-radius:8px;background:#0d1d2c;color:#dceaf4;overflow:hidden;min-width:0;font-size:16px}.web-lab *{box-sizing:border-box}.web-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;background:#142d40}.web-bar span{font-size:13px;color:#b0c8d8}.web-controls{display:flex;flex-wrap:wrap;gap:14px;padding:16px}.web-controls label{display:grid;gap:6px;flex:1 1 180px;min-width:0}.web-controls label.web-check,.web-check{display:flex;align-items:center;gap:8px}.web-lab input:not([type=checkbox]),.web-lab select{width:100%;max-width:100%;min-width:0;padding:9px;border:1px solid #61849a;border-radius:4px;background:#102839;color:#f0f7fc;font:inherit}.web-lab input[type=range]{accent-color:#55d7c4;padding:0}.web-lab input[type=checkbox]{accent-color:#55d7c4}.web-lab button{background:#23516a;color:#fff;border:1px solid #7bb3ca;border-radius:4px;padding:10px 14px;font:inherit;cursor:pointer;max-width:100%;overflow-wrap:anywhere}.web-lab button:focus-visible,.web-lab input:focus-visible,.web-lab select:focus-visible{outline:3px solid #ffd488;outline-offset:3px}.web-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}.web-split figure{margin:0;min-width:0}.web-split figcaption{font-size:14px;font-weight:700;margin-bottom:8px}.web-preview{width:100%;min-width:0;overflow:auto;border:1px solid #668492;background:white}.web-preview iframe{display:block;width:100%;height:370px;border:0;max-width:100%;background:white}.web-lab pre{max-width:100%;overflow:auto;white-space:pre;padding:14px;margin:0;background:#081522;color:#e5edf5;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.web-split pre{max-height:390px}.web-status{padding:16px;margin:0!important;background:#173448;color:#edf8fb!important;line-height:1.6;overflow-wrap:anywhere}.web-tab{margin:0 16px!important;border:1px solid #758b99;border-bottom:0;padding:8px 12px;max-width:100%;overflow-wrap:anywhere;background:#263c4c}.web-native{display:grid;gap:8px;padding:16px;max-width:36rem}.web-native label{color:#e4f1fa}.web-native .web-check input{width:auto}.web-payload{margin:16px!important}.web-lab [data-validation]{padding:0 16px;overflow-wrap:anywhere}.web-action-area,.web-match{padding:16px}.web-action-area p{margin-top:12px}.web-lab .web-demo-button{background:#173f55;color:white;transition:background-color .2s,transform .2s}.web-lab .web-demo-button:hover{background:#286a8b;transform:translateY(-2px)}.web-lab .web-demo-button:active{transform:translateY(0)}.web-lab .web-demo-button:focus-visible{outline:3px solid #ffd488;outline-offset:4px}.web-lab .web-no-motion{transition:none}.web-lab .web-no-motion:hover{transform:none}.web-match [data-answers]{display:flex;gap:12px;flex-wrap:wrap}.web-match h3,.web-match p{color:#e7f4fa}.web-match button code{white-space:normal;color:inherit}.web-lab output{font-variant-numeric:tabular-nums}@media(min-width:1100px){.web-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){.web-lab .web-demo-button{transition:none}.web-lab .web-demo-button:hover{transform:none}}

/* Studio web: szkło, światło i przestrzeń — wyłącznie lekcje HTML/CSS. */
.web-lab{--web-cyan:#65d9ed;--web-mint:#57d9ba;border-color:#36566d;background:radial-gradient(ellipse at 100% 0,rgba(56,189,248,.09),transparent 55%),linear-gradient(145deg,#142639,#0a1423 78%);box-shadow:0 24px 55px -32px #000,0 1px 0 rgba(255,255,255,.06) inset;border-radius:12px;isolation:isolate}.web-bar{background:linear-gradient(120deg,rgba(55,87,116,.6),rgba(19,35,53,.85));border-bottom:1px solid rgba(139,194,220,.16);align-items:center;gap:12px}.web-bar strong{flex:1 1 220px;font-size:16px;line-height:1.45}.web-bar>span:last-child{letter-spacing:.02em}.web-window-dots{display:flex;gap:5px;flex:0 0 auto}.web-window-dots i{width:7px;height:7px;border-radius:50%;background:#526981;box-shadow:0 1px 3px #0008}.web-window-dots i:first-child{background:#fa9a93}.web-window-dots i:nth-child(2){background:#ebc36e}.web-window-dots i:nth-child(3){background:#63cbb2}.web-controls{background:linear-gradient(180deg,rgba(22,44,65,.6),transparent);border-bottom:1px solid #ffffff0b;padding:20px;gap:18px}.web-controls label{font-size:14px;line-height:1.5}.web-lab input:not([type=range]):not([type=checkbox]):not([type=color]),.web-lab select{background:linear-gradient(180deg,#173149,#0f2235);border-color:#496980;box-shadow:0 2px 4px #0003 inset;border-radius:6px}.web-lab input[type=range]{appearance:none;-webkit-appearance:none;height:7px;border:0;border-radius:4px;background:linear-gradient(90deg,#46b6c6,#85a5dc);box-shadow:0 2px 3px #0005 inset;cursor:pointer;margin:9px 0 5px}.web-lab input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #b9ffff;border-radius:50%;background:linear-gradient(140deg,#e8ffff,#4ab8ce 70%);box-shadow:0 3px 8px #0008,0 0 10px #57cce84d}.web-lab input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #b9ffff;border-radius:50%;background:#61c8dc;box-shadow:0 3px 8px #0008}.web-lab button{background:linear-gradient(145deg,#24516b,#153249);box-shadow:0 1px 0 #ffffff1a inset,0 4px 9px #0003;border-color:#54839e;transition:background .2s,border-color .2s}.web-lab button:hover{background:linear-gradient(145deg,#306a83,#1d435d);border-color:#8ddbea}.web-split{padding:20px;gap:18px}.web-split figure{border:1px solid #36546b;border-radius:8px;overflow:hidden;align-self:start;background:#071321;box-shadow:0 12px 25px -20px #000}.web-split figcaption{display:flex;align-items:center;gap:9px;background:linear-gradient(120deg,#1b3349,#122639);font-size:13px;padding:11px 13px;margin:0;border-bottom:1px solid #36546b;color:#d4e6f3}.web-panel-icon{font:600 15px ui-monospace,monospace;color:#76d6e4}.web-live-label{margin-left:auto;color:#82e2c2;font-size:9px;letter-spacing:.12em}.web-live-label::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#73e4b9;margin-right:5px;box-shadow:0 0 7px #73e4b955}.web-preview{border:0}.web-editor-panel pre{padding:16px;font-size:13px}.web-status{background:linear-gradient(100deg,rgba(31,68,86,.8),rgba(21,42,61,.85));border-top:1px solid #3b657666;font-size:14px;line-height:1.65}.web-status::before{content:"↳";color:#65d9cb;font-weight:800;margin-right:8px}.web-native{margin:18px;background:linear-gradient(140deg,#18324a,#102236);border:1px solid #3e6079;border-radius:8px;box-shadow:0 12px 35px -20px #000;padding:20px}.web-native button{justify-self:start}.web-action-area,.web-match{margin:18px;border:1px solid #3c637d;border-radius:8px;background:radial-gradient(ellipse at 85% 0,#29878828,transparent 70%),linear-gradient(140deg,#17334b,#101e32)}.web-match [data-answers]{padding:10px 0}.web-match [data-answers] button{min-height:48px}.web-payload{border:1px solid #36546b;border-radius:6px}.web-tab{background:linear-gradient(120deg,#234862,#142b41);color:#cbe6f4}

/* Proste modele 3D z rzeczywistych elementów interfejsu, bez płaskich ikon zastępczych. */
.web-scene{width:100%;max-width:410px;height:300px;position:relative;display:grid;place-items:center;perspective:1000px;isolation:isolate}.web-scene-glow{position:absolute;inset:35px -10px -5px;background:radial-gradient(ellipse at 50% 70%,#55d9ca33,transparent 65%);filter:blur(15px);transform:rotateX(65deg);z-index:-1}.web-scene-browser{width:94%;position:relative;border:1px solid #7aafcb66;border-radius:10px;overflow:hidden;transform:rotateY(-13deg) rotateX(9deg) rotateZ(-2deg);background:linear-gradient(140deg,#1c344d,#0a1628 80%);box-shadow:18px 25px 45px -22px #000,3px 3px 0 #153348,5px 5px 0 #0a1828,0 1px 1px #ffffff33 inset;min-height:240px}.web-scene-toolbar{display:flex;align-items:center;gap:5px;padding:11px;background:linear-gradient(120deg,#304c67,#172b41);border-bottom:1px solid #7da5c422;font:10px ui-monospace,monospace;color:#b5d0e0}.web-scene-toolbar i{width:5px;height:5px;border-radius:50%;background:#70b7c2}.web-scene-toolbar i:first-child{background:#f6a298}.web-scene-toolbar i:nth-child(2){background:#e6c17e}.web-scene-toolbar span{margin-left:8px}.web-scene code{background:none!important;padding:0!important;color:inherit!important}.web-document-layers{padding:18px;display:grid;gap:12px}.web-document-layers>div{padding:12px;border:1px solid #6395b666;background:linear-gradient(120deg,#2c548057,#1a283a77);border-radius:6px;box-shadow:0 6px 14px #0003;display:grid;gap:6px}.web-document-layers>div:nth-child(2){margin-left:15px;background:linear-gradient(125deg,#20675d88,#143f4d88);border-color:#55d9b566}.web-document-layers code{font-size:16px;color:#8fd6f6!important}.web-document-layers span{font-size:11px;color:#b2ccd9}.web-document-layers strong{font-size:18px;color:white;line-height:1.3}.web-mini-nav{display:flex;justify-content:space-between;padding:18px;font-size:12px}.web-mini-nav b{font-size:22px;color:#7ee4d0;letter-spacing:.03em}.web-mini-nav span{color:#d3dfe9}.web-mini-table{margin:0 18px 14px;border:1px solid #627e9d55;border-radius:5px;overflow:hidden}.web-mini-table>div{display:grid;grid-template-columns:1fr 90px;padding:9px 12px;border-bottom:1px solid #7799b722;font-size:12px;color:#d5e5ef}.web-mini-table>div:first-child{background:#70bddf1a;color:#98dcf5}.web-mini-table em{font-style:normal;color:#8de0be}.web-scene-badge{width:max-content;max-width:90%;padding:7px 12px;margin:0 18px 16px;border:1px solid #64b8b455;background:#143f40;border-radius:4px;font:10px ui-monospace,monospace;color:#9be4d8}.web-mini-form{padding:20px;display:grid;gap:10px}.web-mini-form small{font-size:8px;letter-spacing:.16em;color:#7ddcd1}.web-mini-form strong{font-size:20px;color:#f0f7fc;line-height:1.2}.web-mini-form>div{display:flex;align-items:center;gap:15px;font-size:10px;color:#b2cada}.web-mini-form>div>span{flex:1;padding:8px;background:linear-gradient(130deg,#284760,#152b42);border:1px solid #789ab155;border-radius:4px;color:#ecf7fc;box-shadow:0 3px 6px #0003 inset}.web-mini-form i{float:right;color:#7ae4ba;font-style:normal}.web-mini-form>b{padding:9px;text-align:center;background:linear-gradient(120deg,#47c7ad,#38a8c4);color:#072636;font-size:11px;border-radius:4px;box-shadow:0 4px 8px #0004}.web-mini-warning{font-size:11px;color:#ffd092;padding:8px;background:#a7723022;border:1px solid #b58d5c44;border-radius:4px;margin:0}.web-cascade-podium{height:210px;display:flex;align-items:end;justify-content:center;gap:10px;padding:20px;perspective:500px}.web-cascade-podium>div{width:80px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 5px;border:1px solid #74cbe477;border-radius:5px 5px 2px 2px;background:linear-gradient(120deg,#3e7caa,#183a5a);box-shadow:6px 6px 0 #091f37,10px 15px 20px #0006;height:75px;color:#d4efff;transform:rotateY(-10deg)}.web-cascade-podium>div:nth-child(2){height:115px;background:linear-gradient(130deg,#5976ac,#293c69)}.web-cascade-podium>div:nth-child(3){height:160px;background:linear-gradient(130deg,#62c3aa,#245b64);color:#f1fffc}.web-cascade-podium code{font-size:17px}.web-cascade-podium small{font-size:11px}.web-cascade-podium b{font-size:7px;letter-spacing:.1em;margin-top:auto;color:#d4ffec}.web-mini-layout{display:grid;grid-template-columns:45px 1fr;gap:12px;padding:18px}.web-mini-layout aside{border:1px solid #6ddac366;background:linear-gradient(#2b716f66,#163b5266);padding:12px 6px;font-size:10px;color:#94e3d5;border-radius:4px;line-height:2}.web-mini-layout main{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0}.web-scene-card{background:linear-gradient(145deg,#37607a,#162a43);padding:10px 6px;border:1px solid #8fb6ce55;border-radius:5px;box-shadow:4px 7px 10px #0004;display:grid;gap:9px;align-content:start}.web-scene-card span{display:grid;place-items:center;height:40px;background:linear-gradient(135deg,#66d2bf99,#557cb799);border-radius:3px;font-size:20px;font-weight:700;color:#e4fffa}.web-scene-card b{font-size:9px;color:white}.web-scene-card i{height:3px;background:#91b4c255;border-radius:2px}.web-scene-card i:last-child{width:65%}.web-color-sculpture{height:230px;position:relative;display:grid;place-items:center;perspective:600px}.web-color-orbit{position:absolute;width:180px;height:180px;border-radius:50%;background:conic-gradient(#f472b6,#a78bfa,#38bdf8,#34d399,#facc15,#fb923c,#f472b6);filter:blur(9px);opacity:.4;transform:rotateX(55deg) translateY(55px)}.web-color-orb{width:145px;height:145px;border-radius:50%;background:radial-gradient(circle at 30% 23%,#e5fbff 0%,#5fe2f5 10%,#389fe0 34%,#7960be 63%,#192740 89%);box-shadow:inset -15px -18px 25px #04142799,0 16px 40px #45b9e633,3px 7px 5px #050b1677}.web-color-glass{position:absolute;right:12px;bottom:16px;display:grid;gap:8px;padding:14px 20px;background:linear-gradient(130deg,#6ca5c24d,#182a4566);backdrop-filter:blur(12px);border:1px solid #b4eaff66;border-radius:7px;box-shadow:0 15px 25px #0005;transform:rotateY(-14deg) rotateZ(-4deg);color:#e7faff}.web-color-glass code{font-size:19px}.web-color-glass span{font-size:8px;letter-spacing:.16em}.web-type-poster{position:relative;padding:20px;min-height:230px;display:grid;align-content:end;gap:6px;overflow:hidden;background:radial-gradient(ellipse at 90% 0,#8261c855,transparent 70%)}.web-type-poster>span{color:#86decd;font-size:9px;letter-spacing:.12em}.web-type-poster>b{font:700 120px/.8 Georgia,serif;position:absolute;right:10px;top:22px;color:#7ddbec4d;text-shadow:3px 4px 0 #25435f;transform:rotate(-8deg)}.web-type-poster strong{font-size:23px;position:relative;color:#f2f6ff;max-width:200px;line-height:1.15}.web-type-poster p{font-size:10px;color:#b5cadd;margin:0;position:relative}.web-state-stack{display:grid;gap:14px;padding:25px;perspective:600px}.web-state-stack>div{padding:12px 16px;color:#e3f8ff;border:1px solid #78a9c666;border-radius:5px;background:linear-gradient(140deg,#295372,#152c44);box-shadow:4px 7px 0 #081a2c,0 12px 18px #0005;font-size:13px;transform:rotateY(-12deg)}.web-state-stack>div:nth-child(2){margin-left:14px;background:linear-gradient(120deg,#398da0,#274877);border-color:#9ee4ed}.web-state-stack>div:nth-child(3){outline:2px solid #e3b86d;outline-offset:3px;margin-left:28px}.web-state-stack b{float:right;font-size:9px;border:1px solid #a6c7dd77;padding:1px 5px;border-radius:3px}.web-photo-composition{height:235px;position:relative;background:#0b223b}.web-photo-composition>img{width:100%;height:100%;object-fit:cover;object-position:center 32%}.web-photo-composition>div{position:absolute;inset:auto 0 0;padding:35px 18px 18px;background:linear-gradient(transparent,#0a162b);display:grid;gap:6px}.web-photo-composition span{font:10px ui-monospace,monospace;color:#99ecde}.web-photo-composition b{font-size:20px;color:#f1f9ff;line-height:1.2}.web-box-stack{height:230px;display:grid;place-items:center;perspective:700px}.web-box-margin{padding:13px 15px 16px;background:linear-gradient(135deg,#d29b5a55,#9b634d44);border:1px dashed #e7b37f99;transform:rotateX(30deg) rotateZ(-8deg);font:9px ui-monospace,monospace;color:#ffe0b6;box-shadow:12px 18px 20px #0007;width:82%;border-radius:6px}.web-box-border{padding:11px;background:linear-gradient(135deg,#ac8bdd88,#554f8b77);border:3px solid #bb9ae0aa;color:#efe0ff;border-radius:4px;box-shadow:0 3px 5px #0005}.web-box-padding{padding:11px;background:linear-gradient(135deg,#55bea999,#257e7c88);border:1px solid #7ce6c9aa;color:#caffee;box-shadow:0 3px 5px #0005}.web-box-content{padding:18px;text-align:center;background:linear-gradient(140deg,#6cbce9,#356795);color:#f0faff;border:1px solid #a0e5f6;box-shadow:0 3px 7px #0005;font-size:16px}.web-project-mini{height:235px;display:grid;grid-template-columns:1fr 1fr;position:relative}.web-project-mini>img{width:100%;height:235px;object-fit:cover;object-position:45% 30%;grid-column:2}.web-project-mini>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:start;padding:20px;background:linear-gradient(90deg,#0c1b2c 35%,#0c1b2c22 100%)}.web-project-mini small{font-size:8px;letter-spacing:.16em;color:#7ee1d2}.web-project-mini strong{font-size:30px;line-height:1.05;color:white;max-width:140px;margin:12px 0}.web-project-mini span{border:1px solid #7be1d077;padding:5px 8px;font-size:9px;color:#a6e8dc;border-radius:3px;background:#17414688}.web-command-menu{margin:20px;border:1px solid #7ca6c266;border-radius:7px;overflow:hidden;box-shadow:0 8px 25px #0007}.web-command-menu>span{display:block;font-size:12px;background:#ffffff0c;padding:13px;color:#a7c1d5}.web-command-menu>div{display:grid;grid-template-columns:70px 1fr;gap:5px;padding:10px 12px;border-top:1px solid #739bb122;color:#e2f0f7}.web-command-menu code{font-size:11px}.web-command-menu b{font-size:12px;color:#8ae1ca}.web-command-menu small{font-size:8px;color:#a8c0d1;grid-column:1/-1}

/* Emulator koloru — widok i odczyty są jednym źródłem wartości. */
.web-color-studio{--web-picked:#38bdf8;--web-picked-alpha:rgb(56 189 248 / .65)}.web-color-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;padding:24px;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--web-picked) 12%,transparent),transparent 60%)}.web-color-controls{display:grid;gap:19px;align-content:start;min-width:0}.web-color-controls label{display:grid;gap:7px;font-size:13px;color:#c2d9e7}.web-color-picker-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px}.web-native-picker input[type=color]{width:100%;height:42px;padding:3px;border:1px solid #96c3d066;border-radius:6px;background:#0d2136;cursor:pointer}.web-native-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.web-native-picker input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}.web-field-help{font-size:12px!important;line-height:1.6!important;color:#a4becf!important;margin:0!important}.web-channel-set{display:grid;gap:10px}.web-channel-set>b{display:flex;justify-content:space-between;color:#e7f4fc;font-size:14px}.web-channel-set small{font-size:10px;font-weight:400;color:#a4becf}.web-color-controls input[data-red]{background:linear-gradient(90deg,#291a2b,#f77985)}.web-color-controls input[data-green]{background:linear-gradient(90deg,#142e2b,#63d7a5)}.web-color-controls input[data-blue]{background:linear-gradient(90deg,#14243c,#6ca8f5)}.web-color-controls input[data-hue]{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.web-color-controls input[data-alpha]{background:linear-gradient(90deg,transparent,var(--web-picked)),repeating-conic-gradient(#35495c 0 25%,#1f3246 0 50%) 0/10px 10px}.web-channel-set label,.web-alpha-control label,.web-hsl-controls label{grid-template-columns:minmax(0,1fr) 42px;align-items:center}.web-channel-set input,.web-alpha-control input,.web-hsl-controls input{grid-column:1;grid-row:2}.web-color-controls output{grid-column:2;grid-row:2;text-align:right;font:12px ui-monospace,monospace;color:#d5edfa}.web-hsl-controls{border:1px solid #4e718866;border-radius:6px;background:#14283b55;padding:12px}.web-hsl-controls summary{font-size:13px;color:#baddeb;cursor:pointer}.web-hsl-controls label{margin-top:15px}.web-alpha-control{padding:14px;background:#23465844;border:1px solid #456c8366;border-radius:6px}.web-alpha-control p{font-size:10px;color:#adc5d8;margin:9px 0 0}.web-color-presets{display:flex;gap:9px;flex-wrap:wrap}.web-color-presets button{flex:0 0 25px;width:25px;height:25px;padding:0;border:1px solid #bceaff66;border-radius:50%;background:radial-gradient(circle at 25% 20%,#ffffff70,transparent 60%),var(--swatch);box-shadow:0 3px 5px #0006,0 1px 0 #fff5 inset}.web-color-presets button:hover{background:var(--swatch);border-color:white}.web-color-controls>button{justify-self:start;font-size:12px}.web-color-showcase{display:grid;gap:17px;align-content:start;min-width:0}.web-color-swatch{height:175px;position:relative;border:1px solid #799bae66;border-radius:9px;overflow:hidden;background:repeating-conic-gradient(#2c4056 0 25%,#1b2d42 0 50%) 0/18px 18px;box-shadow:0 15px 28px -18px #000;isolation:isolate}.web-color-swatch>div{position:absolute;inset:0}.web-color-swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#fff1,transparent 60%);pointer-events:none}.web-color-swatch>span{position:absolute;bottom:12px;left:12px;background:#081626dd;border:1px solid #d5eeff44;padding:6px 9px;border-radius:4px;color:white;font:12px ui-monospace,monospace;z-index:1}.web-color-values{display:grid;gap:1px;background:#33526b;border:1px solid #4b6f8666;border-radius:7px;overflow:hidden}.web-color-values>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 8px;background:linear-gradient(110deg,#162f46,#112338);padding:11px 12px;min-width:0}.web-color-values>div>span{grid-column:1;display:block;font:9px ui-monospace,monospace;letter-spacing:.12em;color:#93b2c9}.web-color-values code{grid-column:1;grid-row:2;background:none!important;padding:0!important;color:#d4f2fb!important;font-size:12px!important;overflow-wrap:anywhere}.web-color-values button{grid-column:2;grid-row:1/3;font-size:10px;padding:5px 7px;background:#1b3c54}.web-color-experiment{padding:24px;border-top:1px solid #52758b44;background:radial-gradient(ellipse at 50% 0,#608bd515,transparent 70%)}.web-experiment-heading>span{font-size:10px;letter-spacing:.13em;color:#88daca}.web-experiment-heading h3{font-size:22px!important;line-height:1.25;color:#eaf4fc;margin:12px 0!important;max-width:32ch}.web-experiment-heading>p{font-size:14px;color:#b8cedf;line-height:1.65;max-width:68ch;margin:0 0 20px}.web-opacity-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;perspective:1200px}.web-opacity-pair figure{margin:0;min-width:0}.web-opacity-pair figcaption{font-size:12px;color:#cfe3f0;line-height:1.5;margin-bottom:10px}.web-opacity-pair figcaption b{font:10px ui-monospace,monospace;color:#86d8d2;padding-right:7px}.web-transparency-grid{border-radius:9px;overflow:hidden;border:1px solid #a4c4d255;background:repeating-conic-gradient(#66798b 0 25%,#a2b0bc 0 50%) 0/18px 18px;box-shadow:0 15px 27px -18px #000,0 1px 0 #ffffff22 inset}.web-opacity-card{position:relative;isolation:isolate;min-height:300px;overflow:hidden}.web-opacity-card>img{display:block;width:100%;height:330px;object-fit:cover;object-position:48% 20%}.web-photo-caption{position:absolute;inset:auto 0 0;padding:18px;display:grid;gap:7px;color:white}.web-photo-caption>span{font-size:9px;font-weight:700;letter-spacing:.2em}.web-photo-caption strong{font-size:22px;line-height:1.12;max-width:15ch;color:inherit}.web-photo-caption small{font-size:10px;line-height:1.5;color:inherit}.web-photo-credit{font-size:10px!important;color:#97aebf!important;line-height:1.6;margin:13px 0 20px!important}.web-color-code{border:1px solid #41627b;border-radius:7px;overflow:hidden;margin:0}.web-color-code figcaption{padding:10px 14px;background:linear-gradient(110deg,#24465e,#172c42);color:#cce5f4;font-size:12px}.web-color-code pre{font-size:13px;line-height:1.7}.web-lab [aria-invalid=true]{border-color:#ff968e!important;outline:1px solid #ff968e}
@media(max-width:750px){.web-color-workspace{grid-template-columns:minmax(0,1fr);padding:18px;gap:24px}.web-color-experiment{padding:18px}.web-color-swatch{height:135px}.web-color-controls{gap:15px}.web-opacity-pair{gap:12px}.web-opacity-card>img{height:280px}.web-opacity-card{min-height:280px}.web-photo-caption{padding:12px}.web-photo-caption strong{font-size:19px}.web-photo-caption small{font-size:9px}.web-scene{max-width:360px;height:290px}.web-scene-browser{transform:rotateY(-8deg) rotateX(5deg)}.web-split{padding:16px}.web-bar strong{flex-basis:160px}}
@media(max-width:480px){.web-opacity-pair{grid-template-columns:minmax(0,1fr);gap:20px}.web-opacity-card>img{height:320px;object-position:center 22%}.web-photo-caption{padding:16px}.web-photo-caption strong{font-size:24px}.web-photo-caption small{font-size:11px}.web-bar{padding:14px}.web-bar>span:last-child{font-size:10px}.web-controls{padding:16px}.web-color-values code{font-size:12px!important}.web-color-picker-row{grid-template-columns:80px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.web-lab button{transition:none}.web-scene-browser{transform:none}.web-state-stack>div{transform:none}}
.web-lab .web-download{display:inline-flex;align-items:center;align-self:end;padding:10px 14px;color:#98e6df;border:1px solid #508b9566;background:linear-gradient(130deg,#1a424a,#152c43);border-radius:5px;font-size:13px;text-decoration:none;line-height:1.5}.web-download:hover{color:white;border-color:#8ed6d9}.web-download:focus-visible{outline:3px solid #ffd488;outline-offset:3px}
.web-lab input[type=range]{min-height:0;height:7px}.web-alpha-compare{position:sticky;top:90px;z-index:2;padding:12px 16px;margin:0 0 18px;border:1px solid #6bb1be66;border-radius:7px;background:linear-gradient(120deg,#17364bef,#102338ef);backdrop-filter:blur(10px);box-shadow:0 8px 24px #0004}.web-alpha-compare label{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:7px;align-items:center;color:#d1e6f0;font-size:13px}.web-alpha-compare input{grid-row:2;grid-column:1}.web-alpha-compare output{grid-row:2;grid-column:2;text-align:right;font:12px ui-monospace,monospace}