@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#141614;--panel:#1c1f1b;--line:#353930;--muted:#a1a798;--cream:#f0efdf;--lime:#d5f878}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:'DM Sans',sans-serif;font-size:16px}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;color:inherit;background:none;border:0}button:hover{filter:brightness(1.2)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:4px}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%}.brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;letter-spacing:-1px}.brandmark{color:var(--lime);font-size:36px}.lab{font:11px 'DM Sans',sans-serif;letter-spacing:2px;border-left:1px solid var(--line);margin-left:15px;padding-left:22px;width:95px;line-height:1.5}nav{display:flex;gap:24px;align-items:center;font-size:14px}.outline{border:1px solid #636a58;padding:11px 17px;border-radius:6px;font-size:14px}main{max-width:1600px;margin:auto;padding:34px 4% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.8px;color:var(--muted)}h1{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(32px,3.5vw,52px);letter-spacing:-2px;margin:10px 0}h1 span{color:var(--lime)}.intro p{margin:0;color:var(--muted)}.badge{font-size:11px;letter-spacing:1px;border:1px solid #525944;border-radius:30px;padding:10px 14px;color:#c8d4b3}.badge span{margin-left:18px;color:var(--lime)}.workspace{border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:310px 1fr;overflow:hidden;background:var(--panel)}.controls{padding:23px;border-right:1px solid var(--line)}.panel-title{font-size:12px;font-weight:700;letter-spacing:1.2px;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.panel-title button{font-size:12px;color:var(--muted);letter-spacing:0}label{display:block;font-size:14px;margin-bottom:9px}select{background:#282c24;border:1px solid #454b3e;color:var(--cream);padding:11px 12px;border-radius:5px;width:100%;font-size:14px}.recipe-photo{height:104px;margin-top:16px;border-radius:6px;overflow:hidden;position:relative;background:#111}.recipe-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.6}.recipe-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent)}.recipe-photo div{position:absolute;left:13px;top:26px;z-index:1;max-width:170px}.recipe-photo span{font-size:10px;letter-spacing:1.5px}.recipe-photo strong{display:block;font-family:'Space Grotesk';font-size:18px;line-height:1.2;margin-top:6px}.small{font-size:12px;line-height:1.55}.muted{color:var(--muted)}#recipe-desc{color:var(--muted);min-height:38px}.control{margin-top:18px}.control-head{display:flex;justify-content:space-between}.control-head label{font-size:13px}.control-head output{font-size:13px;color:var(--lime);font-variant-numeric:tabular-nums}.control small{font-size:11px;color:#909886;display:flex;justify-content:space-between;margin-top:4px}input[type=range]{width:100%;accent-color:var(--lime);height:4px;cursor:pointer}.oven-title{border-top:1px solid var(--line);padding-top:22px;margin-top:23px;margin-bottom:15px}.oven-buttons{display:flex;gap:4px}.oven-buttons button{padding:8px 9px;font-size:12px;background:#272c23;border-radius:4px}.oven-buttons button.active{background:#d5f87822;color:var(--lime);box-shadow:inset 0 0 0 1px #8aa34c}.primary{width:100%;padding:14px;background:var(--lime);color:#17200d;font-weight:700;border-radius:5px;margin-top:23px}.centered{text-align:center;font-size:10px}.stage{min-width:0;padding:25px 28px 0;background:radial-gradient(ellipse at 55% 27%,#34382a55,transparent 58%),#1a1d19}.stage-top{display:flex;justify-content:space-between;align-items:center}.stage h2{font-family:'Space Grotesk';font-size:25px;font-weight:500;margin:8px 0 0}.stage h2 span{font-size:14px;color:#828a77;margin-left:8px}.engine{font-size:11px;color:#b7c69d}.view-buttons{display:flex;gap:5px;margin-top:23px}.view-buttons button{padding:8px 15px;font-size:12px;color:var(--muted);border-radius:5px}.view-buttons button.active{background:#3b4231;color:var(--lime)}.canvas-wrap{position:relative;height:320px;margin-top:8px}canvas{width:100%;height:270px;display:block}.canvas-label{display:flex;justify-content:space-between;color:#929c85;font-size:10px;letter-spacing:1.8px;border-top:1px solid #414836;padding-top:10px}.canvas-label span{color:#727c66;font-size:9px;letter-spacing:1px}#field-key{font-size:10px;color:#9da78f;text-align:center;margin-top:15px}.timeline{display:flex;align-items:center;gap:13px}.timeline button{border:1px solid #4a543c;border-radius:50%;width:33px;height:33px;flex-shrink:0;color:var(--lime)}.timeline output{font-family:'Space Grotesk';font-size:20px;min-width:50px}.timeline>span{font-size:12px;color:var(--muted)}.timeline select{width:63px;font-size:12px;padding:6px}.milestones{display:flex;justify-content:space-between;margin:15px 0 25px 92px;font-size:9px;letter-spacing:1px;color:#a0a78f}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0}.metrics>div{padding-left:20px;border-left:1px solid var(--line)}.metrics>div:first-child{padding-left:0;border:0}.metrics label{font-size:12px;color:#bcc4b0;margin-bottom:7px}.metrics strong{font-family:'Space Grotesk';font-weight:500;font-size:27px;display:block;letter-spacing:-1px}.metrics small{font-size:8px;color:#8d967f;letter-spacing:.6px;display:block;margin-top:8px}.insight{display:flex;gap:15px;padding:22px 0 18px}.insight>span{font-size:32px;color:var(--lime)}.insight .eyebrow{color:var(--lime);font-size:10px}.insight p{font-size:14px;line-height:1.6;margin:8px 0 0;max-width:700px;color:#c7cdbe;min-height:45px}.compare-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);padding:20px 0}.compare-bar strong{font-size:14px;font-weight:500}.compare-bar p{font-size:12px;margin:6px 0 0;color:var(--muted)}#comparison{border-top:1px solid var(--line);padding:14px 0;font-size:13px;line-height:1.7;color:var(--lime)}.below{padding:35px 0;display:flex;gap:35px;align-items:center}.below h2{font:500 23px 'Space Grotesk';margin:8px 0;letter-spacing:-.7px;white-space:nowrap}.below .eyebrow{font-size:9px}.challenge-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.challenge-buttons button{border:1px solid var(--line);border-radius:7px;padding:17px;text-align:left;font-size:13px}.challenge-buttons span{display:block;color:var(--lime);font-size:11px;margin-top:12px}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:23px 0;font-size:10px;color:var(--muted)}footer i{font-style:normal;margin-left:14px}footer button{font-size:12px}dialog{background:#20251b;color:var(--cream);border:1px solid #5b674a;border-radius:12px;max-width:650px;width:calc(100% - 30px);padding:32px;max-height:85vh}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{font-family:'Space Grotesk';margin-top:5px}dialog p,dialog li{color:#c5ceba;font-size:15px;line-height:1.7}dialog a{color:var(--lime)}.close{float:right;font-size:27px}dialog textarea{width:100%;min-height:100px;background:#141812;color:var(--cream);padding:12px;border:1px solid #59624d;border-radius:5px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--lime);color:#15220c;padding:14px 22px;border-radius:6px;z-index:5;font-size:14px;display:none}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:5px;border-bottom:1px solid var(--line)}@media(min-width:1450px){.canvas-wrap{height:360px}canvas{height:310px}}@media(max-width:1000px){.workspace{grid-template-columns:270px 1fr}.controls{padding:18px}.stage{padding:22px 20px 0}.metrics>div{padding-left:10px}.metrics strong{font-size:23px}.below{display:block}.challenge-buttons{margin-top:18px}.lab{display:none}.engine{max-width:85px;text-align:right;line-height:1.5}}@media(max-width:720px){header{height:70px;padding:0 5%}.brand{font-size:19px}nav{gap:5px}nav button{font-size:11px!important}nav .outline{padding:9px}main{padding:24px 5% 0}.intro{margin-bottom:22px}.intro h1{font-size:33px;letter-spacing:-1.5px}.intro p{font-size:13px}.intro .eyebrow{font-size:8px}.badge{display:none}.workspace{display:flex;flex-direction:column}.stage{order:-1;padding:20px 17px 0}.stage h2{font-size:23px}.canvas-wrap{height:250px}canvas{height:200px}.view-buttons button{padding:8px 12px}.metrics{gap:6px}.metrics>div{padding-left:6px}.metrics strong{font-size:20px}.metrics label{font-size:10px}.metrics small{font-size:7px}.milestones{font-size:7px;margin-left:65px}.timeline{gap:8px}.timeline output{font-size:16px;min-width:38px}.controls{border-right:0;border-top:1px solid var(--line);padding:22px}.recipe-photo{height:140px}.control{margin-top:22px}.compare-bar .outline{font-size:11px;white-space:nowrap;padding:10px}.below h2{font-size:24px}.challenge-buttons{grid-template-columns:1fr}.challenge-buttons button{display:flex;justify-content:space-between;align-items:center}.challenge-buttons span{margin:0}footer{flex-wrap:wrap;line-height:1.5}footer i{display:none}.insight p{font-size:13px}.canvas-label{font-size:8px}}
/* v2: larger material section, explicit bake duration, and inspectable rim. */
.controls{max-height:1070px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#566144 transparent}.stage{padding-top:24px}.canvas-wrap{height:414px}canvas{height:360px}.render-tools{display:flex;align-items:center;justify-content:space-between;margin:15px 0 0;font-size:12px;color:var(--muted)}.render-tools button{border:1px solid #58634a;border-radius:5px;padding:6px 11px;color:var(--lime);font-size:12px}.render-tools button[aria-pressed=true]{background:#d5f87820}.bake-length{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:17px 0}.bake-length label{margin:0 auto 0 0;font-size:14px}.bake-length input{background:#272d22;border:1px solid #515b43;border-radius:4px;color:var(--cream);width:59px;padding:7px 5px;text-align:center;font-size:15px}.bake-length span{font-size:13px;color:var(--muted)}.bake-length small{font-size:11px;color:var(--muted);margin-left:8px}.topping-status{font-size:12px;color:#ccb18f;padding-top:16px}.metrics{padding:18px 0}.insight{padding-top:16px}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:wait}.canvas-label span{font-size:9px;letter-spacing:.4px}.panel-title{font-size:13px}.control-head label,.control-head output{font-size:14px}.control small{font-size:12px}#recipe-desc{font-size:13px}.engine{font-size:12px}.small.muted.centered{font-size:11px}.metrics small{font-size:9px}
@media(max-width:1000px){.bake-length{flex-wrap:wrap}.bake-length small{width:100%;text-align:right;margin:0}.canvas-wrap{height:374px}canvas{height:320px}.controls{max-height:1140px}}
@media(max-width:720px){.controls{max-height:none;overflow:visible}.canvas-wrap{height:324px}canvas{height:270px}.bake-length input{width:49px}.bake-length small{width:auto;font-size:10px}.canvas-label span{display:none}.topping-status{font-size:11px;line-height:1.6}.metrics small{font-size:8px}.engine{font-size:10px;max-width:105px}.stage-top .eyebrow{font-size:10px}}
#language{width:105px;font-size:14px;padding:8px 9px;border-color:#535d46;background:#23291f}html[lang=it] .lab{font-size:9px;letter-spacing:1px;line-height:1.3;width:112px}html[lang=it] .engine{max-width:120px}html[lang=it] .metrics label{min-height:30px}html[lang=it] .view-buttons button{padding:8px 11px}html[lang=it] .challenge-buttons button{line-height:1.5}html[lang=it] .milestones{letter-spacing:.3px}html[lang=it] .canvas-label span{font-size:8px}
@media(max-width:720px){header{height:auto;min-height:105px;flex-wrap:wrap;padding:9px 5%;gap:5px}header nav{width:100%;justify-content:space-between;gap:7px}#language{width:91px;font-size:12px;padding:6px}html[lang=it] h1{font-size:31px}html[lang=it] .stage h2{font-size:20px}html[lang=it] .milestones{font-size:7px;margin-left:25px}html[lang=it] .compare-bar{flex-wrap:wrap}html[lang=it] .compare-bar .outline{font-size:12px}html[lang=it] .metrics label{font-size:10px}html[lang=it] .control-head label{max-width:80%}}
#dough{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}#dough.dragging{cursor:grabbing}#dough.flat-view{touch-action:auto;cursor:default}#dough:focus-visible{outline:1px solid var(--lime);outline-offset:2px;border-radius:5px}.camera-bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}.camera-bar>div{display:flex;align-items:center;gap:12px}.camera-bar button{border:1px solid #505b42;border-radius:5px;padding:6px 11px;font-size:13px}.camera-bar output{font-size:12px;color:var(--muted);min-width:40px;text-align:center}#camera-help{font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.55}.controls{max-height:1170px}@media(max-width:720px){.controls{max-height:none}#camera-help{font-size:11px}.camera-bar button{min-height:36px;min-width:36px}}

/* Navigation back to the host collection. */
nav > a { color: inherit; font-size: 14px; text-decoration: none; white-space: nowrap; }
nav > a:hover { text-decoration: underline; }

#field-legend { margin: 16px 0 24px; padding: 16px; border: 1px solid #525947; border-radius: 8px; }
#field-legend[hidden], #field-key[hidden] { display: none; }
#legend-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
#legend-bar { height: 18px; border-radius: 3px; border: 1px solid #ffffff35; }
#legend-ticks { position: relative; height: 27px; margin-top: 8px; font-size: 14px; }
#legend-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
#legend-ticks span:first-child { transform: none; }
#legend-ticks span:last-child { transform: translateX(-100%); }
#legend-note { font-size: 14px; line-height: 1.5; color: #c6ccb9; margin: 8px 0 0; }
.char-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.char-status output { font-variant-numeric: tabular-nums; color: #f7bd82; }
.char-status small { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: #afb99c; }
@media(max-width:720px) { #field-legend { padding: 12px; } #legend-ticks { font-size: 12px; } #legend-title { font-size: 15px; } .timeline select { width: 68px; flex-shrink: 0; } }