/* Approved composition. Colors inherit semantic roles from themes.css. */
.r-result{margin-top:0;font-variant-numeric:tabular-nums}.r-context{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px}.r-context p{font-size:14px;color:var(--muted)}.r-context strong{font-size:18px;margin-left:10px;color:var(--ink)}.r-part-choice{width:205px;display:block}.r-part-choice select{min-height:44px;font-size:15px}.r-material-pair{height:184px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.r-material{min-width:0;padding:16px 24px 12px}.r-material+.r-material{border-left:1px solid var(--line)}.r-material-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:38px}.r-material-head h2{font-size:15px;font-weight:400;color:var(--muted)}.r-material-head>strong{font-size:15px;white-space:nowrap;text-align:right}.r-material-head small{display:block;font-size:12px;font-weight:400;line-height:1.3;color:var(--muted)}.r-material-content{display:flex;align-items:center;gap:16px;height:64px;min-width:0}.r-material-content>.icon{width:40px;height:40px;color:var(--muted);stroke-width:1.45}.r-material.new .r-material-content>.icon{color:var(--green)}.r-material-rows{flex:1;min-width:0;display:grid;grid-template-rows:repeat(2,25px);align-content:center}.r-material-rows>div{display:flex;align-items:baseline;gap:12px;min-width:0;line-height:25px}.r-material-rows strong{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.r-material.new .r-material-rows strong{color:var(--green)}.r-material-rows span{font-size:14px;color:var(--muted);white-space:nowrap;margin-left:auto}.r-material-footer{height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px}.r-material-footer>span{font-size:13px;color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.r-material-footer>button{min-height:44px!important;font-size:14px;padding:8px;flex-shrink:0}.r-material-footer .icon{width:17px;height:17px}
.r-stage{height:336px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.13fr) minmax(148px,.6fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:24px;padding:28px 24px;background:var(--result-bg);color:var(--result-ink)}.r-chart{min-width:0;margin:0;border-right:1px solid var(--result-line);padding-right:16px}.r-chart figcaption{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:19px;line-height:1.3;min-height:32px;flex-wrap:wrap}.r-chart figcaption>strong{font-size:15px;display:flex;align-items:center;gap:4px;color:var(--result-accent);white-space:nowrap}.r-chart figcaption .icon{width:17px;height:17px}.r-bars{display:block;width:100%;height:184px;overflow:visible;font-family:Myriad,Arial,sans-serif}.r-grid{fill:none;stroke:var(--result-line);stroke-width:.8}.r-axis{fill:var(--result-muted);font-size:18px}.r-bar.current{fill:var(--bar-before)}.r-bar.new{fill:var(--result-accent)}.r-bar-value{fill:var(--result-ink);font-size:20px;font-weight:600}.r-bar-label{fill:var(--result-muted);font-size:20px}.r-absolute{display:flex;align-items:baseline;justify-content:space-evenly;gap:8px;border-bottom:1px solid var(--result-line);padding:4px 0 5px;font-size:16px;white-space:nowrap}.r-absolute small{font-size:12px;color:var(--result-muted)}.r-facts{min-width:0;display:grid;grid-template-rows:repeat(4,60px)}.r-fact{display:grid;grid-template-columns:27px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--result-line);font-size:16px;line-height:1.3}.r-fact:first-child{border-top:1px solid var(--result-line)}.r-fact>.icon{color:var(--result-accent);width:26px;height:26px}.r-fact strong{font-size:27px;letter-spacing:-.4px;white-space:nowrap}.r-fact strong small{font-size:16px;margin-left:5px;font-weight:400;color:inherit}.r-tree-saving{min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;align-self:stretch;justify-content:center;gap:4px;color:var(--result-accent)}.r-tree-art{width:112px;height:132px;flex-shrink:0;background:currentColor;mask:url('/static/assets/wipak-tree.png') center/contain no-repeat;-webkit-mask:url('/static/assets/wipak-tree.png') center/contain no-repeat}.r-saving{font-size:34px;line-height:1.12;letter-spacing:-.5px;white-space:nowrap}.r-saving span{display:block;font-size:17px;letter-spacing:0;font-weight:400;margin:2px 0 0}.r-saving-context{font-size:14px;line-height:18px;height:54px;flex-shrink:0;width:100%;color:var(--result-ink)}.r-saving-context>span{display:block;height:18px;white-space:nowrap}.r-tree-tag{font-size:10px;font-weight:600;letter-spacing:.2px;margin-top:3px}.r-stage .is-negative,.r-stage .is-negative .r-saving{color:var(--result-danger)}.r-equivalents{min-height:116px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:20px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:20px 24px;background:var(--surface)}.r-equivalents>div{display:flex;align-items:center;justify-content:center;gap:14px}.r-equivalents .icon{width:40px;height:40px;color:var(--green);stroke-width:1.5}.r-equivalents>div>span{display:grid;gap:2px}.r-equivalents strong{font-size:24px;white-space:nowrap;line-height:1.2}.r-equivalents small{font-size:15px;font-weight:400;color:inherit}.r-equivalents>div>span>span{font-size:14px;color:var(--muted)}
#material-panel{position:fixed;inset:0 0 0 auto;margin:0;border:0;border-left:1px solid var(--line);background:var(--surface);color:var(--ink);width:min(650px,100vw);height:100dvh;max-height:none;max-width:none;padding:0;box-shadow:-12px 0 40px var(--shadow);overflow:auto;overscroll-behavior:contain}#material-panel::backdrop{background:transparent}.r-panel-header{position:sticky;top:0;background:var(--surface);z-index:1;border-bottom:1px solid var(--line);padding:20px 24px 0}.r-panel-header>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:16px}.r-panel-header h2{font-size:26px}.r-panel-header>div:first-child button{width:44px;padding:8px;min-height:44px}.r-panel-header p{font-size:14px;color:var(--muted);margin:8px 0 14px}.r-panel-tabs{display:flex;gap:24px}.r-panel-tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;padding-inline:0;background:transparent;color:var(--muted);min-height:44px}.r-panel-tabs button[aria-pressed=true]{border-bottom-color:var(--green);color:var(--green)}.r-panel-body{padding:24px}.r-panel-body>section+section{margin-top:28px}.r-panel-body h3{font-size:20px;display:flex;align-items:center;gap:10px}.r-panel-body h3>.icon{color:var(--green)}.r-panel-body>section>.small{margin:5px 0 12px}.r-layer-detail{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:start;border-top:1px solid var(--line);padding:14px 0}.r-layer-detail>span{font-size:13px;color:var(--muted);padding-top:3px}.r-layer-detail>div>strong{font-size:17px;line-height:1.3;display:block;overflow-wrap:anywhere}.r-layer-detail p{margin-top:5px;font-size:14px;color:var(--muted)}.r-layer-detail>strong{font-size:16px;white-space:nowrap;padding-top:1px}.r-calculation-note{border-top:1px solid var(--line);padding-top:20px;font-size:14px;color:var(--muted);line-height:1.6}.r-calculation-note h3{color:var(--ink);font-size:18px;margin-bottom:8px}.r-calculation-note p+p{margin-top:10px}
@media(min-width:901px) and (max-height:850px){.r-material-pair{height:176px}.r-material-content{height:56px}.r-stage{height:320px;padding-block:24px}.r-facts{grid-template-rows:repeat(4,60px)}.r-tree-art{height:108px;width:100px}.r-saving{font-size:32px}.r-saving-context{font-size:13px}.r-bars{height:170px}.r-equivalents{min-height:108px;padding-block:20px}}
@media(min-width:651px) and (max-width:900px){.r-material-pair{height:192px}.r-material{padding:16px 20px 12px}.r-material-content{gap:10px;height:72px}.r-material-content>.icon{width:32px;height:32px}.r-material-rows strong{font-size:17px}.r-material-rows span{font-size:13px}.r-material-head strong{font-size:14px}.r-material-head small{font-size:11px}.r-material-footer>span{font-size:12px}.r-material-footer>button{font-size:13px}.r-stage{height:382px;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1.13fr) minmax(134px,.6fr);padding:28px 20px}.r-chart{padding-right:8px}.r-chart figcaption{display:grid;gap:5px;font-size:18px}.r-chart figcaption>strong{font-size:14px}.r-bars{height:200px}.r-axis{font-size:20px}.r-bar-label{font-size:21px}.r-absolute{gap:6px;font-size:15px;flex-wrap:wrap}.r-absolute>small{width:100%;text-align:right}.r-facts{grid-template-rows:repeat(4,76px)}.r-fact{grid-template-columns:24px 1fr auto;gap:9px;font-size:15px}.r-fact>.icon{width:24px;height:24px}.r-fact strong{font-size:25px}.r-tree-art{width:112px;height:148px}.r-saving{font-size:30px}.r-saving span{display:block;font-size:17px;margin:2px 0 0}.r-saving-context{font-size:13px;margin-top:4px}.r-equivalents{min-height:132px;gap:12px}.r-equivalents>div{flex-direction:column;text-align:center;gap:8px}.r-equivalents strong{font-size:25px}}
@media(max-width:650px){.r-context{gap:12px;min-height:68px}.r-part-choice{width:185px}.r-context p{font-size:13px;display:grid;gap:2px;text-align:right}.r-context strong{margin:0;font-size:17px}.r-material-pair{height:368px;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:0}.r-material{padding:16px}.r-material+.r-material{border-left:0;border-top:1px solid var(--line)}.r-material-content{gap:12px;height:65px}.r-material-rows strong{font-size:17px}.r-material-footer{height:44px}.r-stage{height:auto;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:auto auto;gap:28px 16px;padding:28px 16px}.r-chart{grid-column:1/-1;border:0;padding:0}.r-chart figcaption{font-size:20px}.r-bars{height:220px}.r-absolute{font-size:16px;flex-wrap:wrap}.r-facts{grid-template-rows:repeat(4,76px)}.r-fact{grid-template-columns:24px 1fr auto;gap:8px;font-size:14px}.r-fact strong{font-size:23px}.r-tree-art{width:100px;height:140px}.r-saving{font-size:27px}.r-saving span{display:block;font-size:16px;margin:2px 0 0}.r-saving-context{font-size:12px}.r-equivalents{grid-template-columns:1fr 1fr;gap:28px 16px;padding:24px 16px}.r-equivalents>div{justify-content:flex-start;gap:12px}.r-equivalents .icon{width:36px;height:36px}.r-equivalents strong{font-size:24px}.r-equivalents>div>span>span{font-size:13px}.r-panel-header{padding:16px 16px 0}.r-panel-body{padding:20px 16px}.r-layer-detail{grid-template-columns:20px minmax(0,1fr) auto;gap:8px}.r-layer-detail>strong{font-size:14px}.r-layer-detail>div>strong{font-size:16px}}