diff --git a/src/vaev-engine/layout/flex.cpp b/src/vaev-engine/layout/flex.cpp
index dda0afa8..1ea38e83 100644
--- a/src/vaev-engine/layout/flex.cpp
+++ b/src/vaev-engine/layout/flex.cpp
@@ -240,21 +240,21 @@ struct FlexItem {
     // https://www.w3.org/TR/css-flexbox-1/#valdef-flex-basis-auto
     void computeFlexBaseSize(Tree& tree, Opt<Au> mainContainerSize, IntrinsicSize containerSizing) {
         // A NONE return here indicates a CONTENT case for the flex basis
-        auto getDefiniteFlexBasisSize = [](FlexProps& flexItemProps, FlexAxis& fa, Box* box) -> Opt<CalcValue<PercentOr<Length>>> {
+        auto getDefiniteFlexBasisSize = [](FlexProps& flexItemProps, FlexAxis& fa, Box* box) -> Opt<Calc<Length>> {
             if (flexItemProps.basis.is<Keywords::Content>())
                 return NONE;
 
             // from now on flex basis is width
 
-            if (auto basisCalc = flexItemProps.basis.is<CalcValue<PercentOr<Length>>>())
+            if (auto basisCalc = flexItemProps.basis.is<Calc<Length>>())
                 return *basisCalc;
 
-            if (not fa.mainAxis(box->style->sizing).is<CalcValue<PercentOr<Length>>>())
+            if (not fa.mainAxis(box->style->sizing).is<Calc<Length>>())
                 return NONE;
 
             // TODO: solve definite values also min and max content
 
-            return fa.mainAxis(box->style->sizing).unwrap<CalcValue<PercentOr<Length>>>();
+            return fa.mainAxis(box->style->sizing).unwrap<Calc<Length>>();
         };
 
         if (auto flexBasisDefiniteSize = getDefiniteFlexBasisSize(flexItemProps, fa, box)) {
@@ -300,7 +300,7 @@ struct FlexItem {
     Au getMinAutoPrefMainSize(Tree& tree, Vec2Au containerSize) const {
         Opt<Au> definiteMaxMainSize;
         auto maxMainSize = box->style->sizing->maxSize(fa.isRowOriented ? Axis::HORIZONTAL : Axis::VERTICAL);
-        if (auto maxMainSizeCalc = maxMainSize.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto maxMainSizeCalc = maxMainSize.is<Calc<Length>>()) {
             definiteMaxMainSize = resolve(
                 tree,
                 *box,
@@ -315,7 +315,7 @@ struct FlexItem {
             contentSizeSuggestion = min(contentSizeSuggestion, definiteMaxMainSize.unwrap());
 
         auto mainAxis = fa.mainAxis(box->style->sizing);
-        if (auto mainAxisCalc = mainAxis.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto mainAxisCalc = mainAxis.is<Calc<Length>>()) {
             Au specifiedSizeSuggestion = resolve(
                 tree,
                 *box,
@@ -338,7 +338,7 @@ struct FlexItem {
         MaxSize maxSizeToResolve = isWidth ? box->style->sizing->maxWidth : box->style->sizing->maxHeight;
 
         auto visitor = Visitor{
-            [&](CalcValue<PercentOr<Length>> const& v) {
+            [&](Calc<Length> const& v) {
                 return resolve(
                     tree,
                     *box,
@@ -380,7 +380,7 @@ struct FlexItem {
         Au contentContribution = fa.mainAxis(isMin ? minContentSize : maxContentSize) + getMargin(BOTH_MAIN);
 
         auto mainAxis = fa.mainAxis(box->style->sizing);
-        if (auto mainAxisCalc = mainAxis.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto mainAxisCalc = mainAxis.is<Calc<Length>>()) {
             contentContribution = max(
                 contentContribution,
                 resolve(
@@ -425,7 +425,7 @@ struct FlexItem {
             );
 
         auto crossAxis = fa.crossAxis(box->style->sizing);
-        if (auto crossAxisCalc = crossAxis.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto crossAxisCalc = crossAxis.is<Calc<Length>>()) {
             contentContribution = max(
                 contentContribution,
                 resolve(
@@ -702,11 +702,11 @@ struct FlexFormatingContext : FormatingContext {
 
     void _determineFlexBaseSizeAndHypotheticalMainSize(Tree& tree, Box& box, Input input) {
         Opt<Au> containerDefiniteMainSize = fa.mainAxis(input.knownSize);
-        if (fa.mainAxis(box.style->sizing).is<CalcValue<PercentOr<Length>>>()) {
+        if (fa.mainAxis(box.style->sizing).is<Calc<Length>>()) {
             containerDefiniteMainSize = resolve(
                 tree,
                 box,
-                fa.mainAxis(box.style->sizing).unwrap<CalcValue<PercentOr<Length>>>(),
+                fa.mainAxis(box.style->sizing).unwrap<Calc<Length>>(),
                 fa.mainAxis(input.containingBlock)
             );
         }
diff --git a/src/vaev-engine/layout/layout-impl.cpp b/src/vaev-engine/layout/layout-impl.cpp
index 130516cf..2e965bf5 100644
--- a/src/vaev-engine/layout/layout-impl.cpp
+++ b/src/vaev-engine/layout/layout-impl.cpp
@@ -174,7 +174,7 @@ Opt<Au> computeSpecifiedSize(Tree& tree, Box& box, Size size, Vec2Au containingB
             return clamp(stretchIntrinsicSize.y, minIntrinsicSize.y, maxIntrinsicSize.y);
     } else if (size.is<Keywords::Auto>()) {
         return NONE;
-    } else if (auto calc = size.is<CalcValue<PercentOr<Length>>>()) {
+    } else if (auto calc = size.is<Calc<Length>>()) {
         return resolve(tree, box, *calc, isWidth ? containingBlock.x : containingBlock.y);
     } else {
         logWarn("unknown specified size: {}", size);
diff --git a/src/vaev-engine/layout/paint.cpp b/src/vaev-engine/layout/paint.cpp
index 916b99f2..f0d5908e 100644
--- a/src/vaev-engine/layout/paint.cpp
+++ b/src/vaev-engine/layout/paint.cpp
@@ -240,7 +240,7 @@ static void _paintChildren(Frag& frag, Scene::Stack& stack, auto predicate) {
     }
 }
 
-static Math::Radiif _resolveRadii(Resolver& resolver, Math::Radii<CalcValue<PercentOr<Length>>> const& baseRadii, RectAu const& referenceBox) {
+static Math::Radiif _resolveRadii(Resolver& resolver, Math::Radii<Calc<Length>> const& baseRadii, RectAu const& referenceBox) {
     Math::Radiif radii;
     radii.a = resolver.resolve(baseRadii.a, referenceBox.height).cast<f64>();
     radii.b = resolver.resolve(baseRadii.b, referenceBox.width).cast<f64>();
@@ -356,7 +356,7 @@ static Rc<Scene::Clip> _applyClip(Frag const& frag, Rc<Scene::Node> content) {
                 auto hSquared = Math::pow2(referenceBox.height.cast<f64>());
                 auto wSquared = Math::pow2(referenceBox.width.cast<f64>());
                 radius = resolver.resolve(
-                                     circle.radius.unwrap<CalcValue<PercentOr<Length>>>(),
+                                     circle.radius.unwrap<Calc<Length>>(),
                                      Au(Math::sqrt(hSquared + wSquared) / Math::sqrt(2.0))
                 )
                              .cast<f64>();
@@ -420,7 +420,7 @@ static Rc<Scene::Clip> _applyClip(Frag const& frag, Rc<Scene::Node> content) {
                 rx = max(Math::abs(referenceBox.width.cast<f64>() - center.x), center.x);
             } else {
                 rx = resolver.resolve(
-                                 ellipse.rx.unwrap<CalcValue<PercentOr<Length>>>(),
+                                 ellipse.rx.unwrap<Calc<Length>>(),
                                  referenceBox.width
                 )
                          .cast<f64>();
@@ -433,7 +433,7 @@ static Rc<Scene::Clip> _applyClip(Frag const& frag, Rc<Scene::Node> content) {
                 ry = max(Math::abs(referenceBox.height.cast<f64>() - center.y), center.y);
             } else {
                 ry = resolver.resolve(
-                                 ellipse.ry.unwrap<CalcValue<PercentOr<Length>>>(),
+                                 ellipse.ry.unwrap<Calc<Length>>(),
                                  referenceBox.height
                 )
                          .cast<f64>();
@@ -516,7 +516,7 @@ static Vec2Au _resolveTransformOrigin(RectAu referenceBox, TransformOrigin origi
             [&](Keywords::Center) {
                 return referenceBox.center().x;
             },
-            [&](CalcValue<PercentOr<Length>> value) {
+            [&](Calc<Length> value) {
                 return referenceBox.start() + resolver.resolve(value, referenceBox.width);
             }
         }
@@ -533,7 +533,7 @@ static Vec2Au _resolveTransformOrigin(RectAu referenceBox, TransformOrigin origi
             [&](Keywords::Center) {
                 return referenceBox.center().y;
             },
-            [&](CalcValue<PercentOr<Length>> value) {
+            [&](Calc<Length> value) {
                 return referenceBox.top() + resolver.resolve(value, referenceBox.height);
             }
         }
diff --git a/src/vaev-engine/layout/positioned.cpp b/src/vaev-engine/layout/positioned.cpp
index 66870311..af811643 100644
--- a/src/vaev-engine/layout/positioned.cpp
+++ b/src/vaev-engine/layout/positioned.cpp
@@ -32,17 +32,17 @@ export void layoutPositioned(Tree& tree, Frag& frag, RectAu containingBlock) {
         auto start = metrics.position.x;
 
         auto topOffset = style.offsets->top;
-        if (auto topOffsetCalc = topOffset.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto topOffsetCalc = topOffset.is<Calc<Length>>()) {
             top = origin.y + resolve(tree, *frag.box, *topOffsetCalc, relativeTo.height);
         }
 
         auto startOffset = style.offsets->start;
-        if (auto startOffsetCalc = startOffset.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto startOffsetCalc = startOffset.is<Calc<Length>>()) {
             start = origin.x + resolve(tree, *frag.box, *startOffsetCalc, relativeTo.width);
         }
 
         auto endOffset = frag.style().offsets->end;
-        if (auto endOffsetCalc = endOffset.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto endOffsetCalc = endOffset.is<Calc<Length>>()) {
             start = (origin.x + relativeTo.width) - resolve(tree, *frag.box, *endOffsetCalc, relativeTo.width) - metrics.borderSize.width;
         }
 
diff --git a/src/vaev-engine/layout/svg.cpp b/src/vaev-engine/layout/svg.cpp
index da117015..ce91f785 100644
--- a/src/vaev-engine/layout/svg.cpp
+++ b/src/vaev-engine/layout/svg.cpp
@@ -14,10 +14,10 @@ using namespace Karm;
 namespace Vaev::Layout {
 
 // SVG sizes shouldn't be defined using calc values
-Opt<PercentOr<Length>> extractValueFromCalc(CalcValue<PercentOr<Length>> const& size) {
+Opt<PercentOr<Length>> extractValueFromCalc(Calc<Length> const& size) {
     return size.visit(
         Visitor{
-            [](CalcValue<PercentOr<Length>>::Value const& v) {
+            [](Calc<Length>::Value const& v) {
                 return Opt<PercentOr<Length>>{v.unwrap<PercentOr<Length>>()};
             },
             [](auto const) {
@@ -32,7 +32,7 @@ PercentOr<Length> fromSize(Size const& size) {
     if (size.is<Keywords::Auto>())
         return PercentOr<Length>{Percent{100}};
 
-    return extractValueFromCalc(size.unwrap<CalcValue<PercentOr<Length>>>())
+    return extractValueFromCalc(size.unwrap<Calc<Length>>())
         .unwrapOr(PercentOr<Length>{Percent{100}});
 }
 
@@ -158,7 +158,7 @@ Rc<Scene::Node> circleToSceneNode(Circle<f64> circle, Opt<Gfx::Fill> fill, Opt<G
     return makeRc<Scene::Shape>(path, stroke, fill);
 }
 
-Circle<PercentOr<Length>> buildCircle(Style::SpecifiedValues const& style) {
+Circle<Calc<Length>> buildCircle(Style::SpecifiedValues const& style) {
     return {
         style.svg->cx,
         style.svg->cy,
@@ -166,7 +166,7 @@ Circle<PercentOr<Length>> buildCircle(Style::SpecifiedValues const& style) {
     };
 }
 
-Circle<Au> resolve(Circle<PercentOr<Length>> const& circle, Karm::Vec2Au const& relativeTo) {
+Circle<Au> resolve(Circle<Calc<Length>> const& circle, Karm::Vec2Au const& relativeTo) {
     return {
         Vaev::Layout::resolve(circle.cx, relativeTo.x),
         Vaev::Layout::resolve(circle.cy, relativeTo.y),
@@ -385,10 +385,10 @@ Opt<Number> intrinsicAspectRatio(Opt<ViewBox> const& vb, Size const& width, Size
     // FIXME: again this should be targetted by the styling computation refactoring,
     // where Size will be resolved to a mix between Percent and Lengths
     auto absoluteValue = [](Size size) -> Opt<Length> {
-        if (not size.is<CalcValue<PercentOr<Length>>>())
+        if (not size.is<Calc<Length>>())
             return NONE;
 
-        auto calc = size.unwrap<CalcValue<PercentOr<Length>>>();
+        auto calc = size.unwrap<Calc<Length>>();
 
         auto percOrLength = extractValueFromCalc(calc);
         if (not percOrLength)
diff --git a/src/vaev-engine/layout/table.cpp b/src/vaev-engine/layout/table.cpp
index 33f65e2d..166fc5f1 100644
--- a/src/vaev-engine/layout/table.cpp
+++ b/src/vaev-engine/layout/table.cpp
@@ -446,13 +446,13 @@ struct TableFormatingContext : FormatingContext {
         // NOTE: The table does not automatically expand to fill its containing block.
         //       (https://www.w3.org/TR/CSS22/tables.html#width-layout)
 
-        if (not(box.style->sizing->width.is<Keywords::Auto>() or box.style->sizing->width.is<CalcValue<PercentOr<Length>>>()))
+        if (not(box.style->sizing->width.is<Keywords::Auto>() or box.style->sizing->width.is<Calc<Length>>()))
             logWarn("width can't be anything other than 'auto' or a length in a table context");
 
         tableUsedWidth =
-            not box.style->sizing->width.is<CalcValue<PercentOr<Length>>>()
+            not box.style->sizing->width.is<Calc<Length>>()
                 ? 0_au // AUTO case
-                : resolve(tree, box, box.style->sizing->width.unwrap<CalcValue<PercentOr<Length>>>(), availableXSpace) -
+                : resolve(tree, box, box.style->sizing->width.unwrap<Calc<Length>>(), availableXSpace) -
                       boxBorder.horizontal(); // NOTE: maybe remove this after borderbox param is clearer
 
         auto [columnBorders, sumBorders] = getColumnBorders();
@@ -465,10 +465,10 @@ struct TableFormatingContext : FormatingContext {
 
             auto const& width = col.el.style->sizing->width;
 
-            if (not(width.is<Keywords::Auto>() or width.is<CalcValue<PercentOr<Length>>>()))
+            if (not(width.is<Keywords::Auto>() or width.is<Calc<Length>>()))
                 logWarn("width can't be anything other than 'auto' or a length in a table context");
 
-            if (auto widthCalc = width.is<CalcValue<PercentOr<Length>>>()) {
+            if (auto widthCalc = width.is<Calc<Length>>()) {
                 for (usize x = col.start; x <= col.end; ++x) {
                     colWidthOrNone[x] = resolve(tree, col.el, *widthCalc, tableUsedWidth);
                 }
@@ -482,7 +482,7 @@ struct TableFormatingContext : FormatingContext {
         while (x < grid.size.x) {
             auto cell = grid.get(x, 0);
 
-            auto cellBoxWidthCalc = cell.box->style->sizing->width.is<CalcValue<PercentOr<Length>>>();
+            auto cellBoxWidthCalc = cell.box->style->sizing->width.is<Calc<Length>>();
 
             if (not(cell.box->style->sizing->width.is<Keywords::Auto>() or cellBoxWidthCalc))
                 logWarn("width can't be anything other than 'auto' or a length in a table context");
@@ -557,10 +557,10 @@ struct TableFormatingContext : FormatingContext {
         auto cellMinWidth = cellMinOutput.x;
         auto cellMaxWidth = cellMaxOutput.x;
 
-        if (not(cell.box->style->sizing->width.is<Keywords::Auto>() or cell.box->style->sizing->width.is<CalcValue<PercentOr<Length>>>()))
+        if (not(cell.box->style->sizing->width.is<Keywords::Auto>() or cell.box->style->sizing->width.is<Calc<Length>>()))
             logWarn("width can't be anything other than 'auto' or a length in a table context");
 
-        if (auto cellBoxWidthCalc = cell.box->style->sizing->width.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto cellBoxWidthCalc = cell.box->style->sizing->width.is<Calc<Length>>()) {
             auto cellPreferredWidth = resolve(
                 tree,
                 box,
@@ -640,7 +640,7 @@ struct TableFormatingContext : FormatingContext {
         for (auto& group : colGroups) {
 
             auto columnGroupWidth = group.el.style->sizing->width;
-            auto columnGroupWidthCalc = columnGroupWidth.is<CalcValue<PercentOr<Length>>>();
+            auto columnGroupWidthCalc = columnGroupWidth.is<Calc<Length>>();
 
             if (not(columnGroupWidth.is<Keywords::Auto>() or columnGroupWidthCalc))
                 logWarn("width can't be anything other than 'auto' or a length in a table context");
@@ -668,7 +668,7 @@ struct TableFormatingContext : FormatingContext {
     void computeAutoWidthOfCols(Tree& tree, Vec<Au>& minColWidth, Vec<Au>& maxColWidth, Au tableWidth) {
         for (auto& [start, end, el] : cols) {
             auto width = el.style->sizing->width;
-            auto widthCalc = width.is<CalcValue<PercentOr<Length>>>();
+            auto widthCalc = width.is<Calc<Length>>();
 
             if (not(width.is<Keywords::Auto>() or widthCalc))
                 logWarn("width can't be anything other than 'auto' or a length in a table context");
@@ -713,7 +713,7 @@ struct TableFormatingContext : FormatingContext {
         //        https://www.w3.org/TR/css-tables-3/#intrinsic-percentage-width-of-a-column-based-on-cells-of-span-up-to-1
         //        We will need a way to retrieve the percentage value, which is also not yet implemented.
 
-        if (auto boxWidthCalc = box.style->sizing->width.is<CalcValue<PercentOr<Length>>>()) {
+        if (auto boxWidthCalc = box.style->sizing->width.is<Calc<Length>>()) {
             auto [minWithoutPerc, maxWithoutPerc] = computeMinMaxAutoWidths(tree, grid.size.x, 0_au);
 
             Au tableComputedWidth = resolve(tree, box, *boxWidthCalc, containingBlockX);
@@ -791,7 +791,7 @@ struct TableFormatingContext : FormatingContext {
 
         for (auto& row : rows) {
             auto& height = row.el.style->sizing->height;
-            auto heightCalc = height.is<CalcValue<PercentOr<Length>>>();
+            auto heightCalc = height.is<Calc<Length>>();
 
             if (not(height.is<Keywords::Auto>() or heightCalc))
                 logWarn("height can't be anything other than 'auto' or a length in a table context");
@@ -815,11 +815,11 @@ struct TableFormatingContext : FormatingContext {
                 // [A] CSS 2.2 does not specify how cells that span more than one row affect row height calculations except
                 // that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
 
-                if (not(cell.box->style->sizing->height.is<Keywords::Auto>() or cell.box->style->sizing->height.is<CalcValue<PercentOr<Length>>>()))
+                if (not(cell.box->style->sizing->height.is<Keywords::Auto>() or cell.box->style->sizing->height.is<Calc<Length>>()))
                     logWarn("height can't be anything other than 'auto' or a length in a table context");
 
                 auto rowSpan = cell.box->attrs.rowSpan;
-                if (auto cellBoxHeightCalc = cell.box->style->sizing->height.is<CalcValue<PercentOr<Length>>>()) {
+                if (auto cellBoxHeightCalc = cell.box->style->sizing->height.is<Calc<Length>>()) {
                     auto computedHeight = resolve(
                         tree,
                         *cell.box,
diff --git a/src/vaev-engine/layout/values.cpp b/src/vaev-engine/layout/values.cpp
index c569ad9e..752c52cb 100644
--- a/src/vaev-engine/layout/values.cpp
+++ b/src/vaev-engine/layout/values.cpp
@@ -262,7 +262,7 @@ export struct Resolver {
     Au resolve(Width const& value, Au relative) {
         if (value.is<Keywords::Auto>())
             return 0_au;
-        return resolve(value.unwrap<CalcValue<PercentOr<Length>>>(), relative);
+        return resolve(value.unwrap<Calc<Length>>(), relative);
     }
 
     Rad resolve(Angle const& value) {
@@ -328,12 +328,12 @@ export struct Resolver {
     }
 
     template <typename T, typename... Args>
-    Resolved<T> resolve(CalcValue<T> const& calc, Args... args) {
+    Resolved<T> resolve(Calc<T> const& calc, Args... args) {
         auto resolveUnion = Visitor{
             [&](T const& v) {
                 return resolve(v, args...);
             },
-            [&](CalcValue<T>::Leaf const& v) {
+            [&](Calc<T>::Leaf const& v) {
                 return resolve<T>(*v, args...);
             },
             [&](Number const& v)
@@ -344,16 +344,16 @@ export struct Resolver {
             };
 
         return calc.visit(Visitor{
-            [&](typename CalcValue<T>::Value const& v) {
+            [&](typename Calc<T>::Value const& v) {
                 return v.visit(resolveUnion);
             },
-            [&](typename CalcValue<T>::Unary const& u) {
+            [&](typename Calc<T>::Unary const& u) {
                 return _resolveUnary<T>(
                     u.op,
                     u.val.visit(resolveUnion)
                 );
             },
-            [&](typename CalcValue<T>::Binary const& b) {
+            [&](typename Calc<T>::Binary const& b) {
                 return _resolveInfix<T>(
                     b.op,
                     b.lhs.visit(resolveUnion),
@@ -367,11 +367,11 @@ export struct Resolver {
 // MARK: Resolve during layout -------------------------------------------------
 
 // HACK: Temporary workaround while we don't properly evaluate computed values
-export bool isPurePercentage(CalcValue<PercentOr<Length>> calcValue) {
-    if (not calcValue._inner.is<CalcValue<PercentOr<Length>>::Value>())
+export bool isPurePercentage(Calc<Length> calcValue) {
+    if (not calcValue._inner.is<Calc<Length>::Value>())
         return false;
 
-    auto const& value = calcValue._inner.unwrap<CalcValue<PercentOr<Length>>::Value>();
+    auto const& value = calcValue._inner.unwrap<Calc<Length>::Value>();
     if (not value.is<PercentOr<Length>>())
         return false;
 
@@ -399,7 +399,7 @@ export Au resolve(Tree const& tree, Box const& box, FontSize const& value) {
 }
 
 export template <typename T, typename... Args>
-auto resolve(Tree const& tree, Box const& box, CalcValue<T> const& value, Args... args) -> Resolved<T> {
+auto resolve(Tree const& tree, Box const& box, Calc<T> const& value, Args... args) -> Resolved<T> {
     return Resolver::from(tree, box).resolve(value, args...);
 }
 
diff --git a/src/vaev-engine/loader/loader-impl.cpp b/src/vaev-engine/loader/loader-impl.cpp
index 3e7a7d58..29053e04 100644
--- a/src/vaev-engine/loader/loader-impl.cpp
+++ b/src/vaev-engine/loader/loader-impl.cpp
@@ -41,8 +41,8 @@ Async::Task<Rc<Scene::Node>> _fetchImageContentAsync(Http::Client& client, Ref::
         // NOSPEC: The spec references a “default object size” but does not define explicit values.
         //         Historically, browsers (including Chrome) default to 300x150, as mentioned in older drafts:
         //         https://www.w3.org/TR/2011/WD-css3-images-20110908/#default-object-size
-        auto width = resolver.resolve(root->specifiedValues()->sizing->width.unwrapOr<CalcValue<PercentOr<Length>>>(Length{300_au}), 300_au);
-        auto height = resolver.resolve(root->specifiedValues()->sizing->height.unwrapOr<CalcValue<PercentOr<Length>>>(Length{300_au}), 300_au);
+        auto width = resolver.resolve(root->specifiedValues()->sizing->width.unwrapOr<Calc<Length>>(Length{300_au}), 300_au);
+        auto height = resolver.resolve(root->specifiedValues()->sizing->height.unwrapOr<Calc<Length>>(Length{300_au}), 300_au);
 
         window->changeMedia(Style::Media::forRender({width, height}, Resolution::fromDppx(1)));
         co_return Ok(window->render());
diff --git a/src/vaev-engine/style/computer.cpp b/src/vaev-engine/style/computer.cpp
index f4b17b78..a66696e8 100644
--- a/src/vaev-engine/style/computer.cpp
+++ b/src/vaev-engine/style/computer.cpp
@@ -155,7 +155,7 @@ export struct Computer {
         if (auto size = el->getAttribute(Html::SIZE_ATTR)) {
             auto value = parseValue<Integer>(size.unwrap());
             if (value)
-                res.pushBack(WidthProp{CalcValue<PercentOr<Length>>{Length{static_cast<f64>(value.take()), Length::CH}}});
+                res.pushBack(WidthProp{Calc<Length>{Length{static_cast<f64>(value.take()), Length::CH}}});
         }
 
         return res;
@@ -174,10 +174,10 @@ export struct Computer {
             // height to '150px' (using CSS 2.1 replaced elements size calculation).
             if (not svgEl->hasAttribute(Svg::VIEW_BOX_ATTR)) {
                 if (not svgEl->hasAttribute(Svg::WIDTH_ATTR)) {
-                    styleProps.pushBack(WidthProp{CalcValue<PercentOr<Length>>{PercentOr<Length>{Length{Au{300}}}}});
+                    styleProps.pushBack(WidthProp{Calc<Length>{Length{Au{300}}}});
                 }
                 if (not svgEl->hasAttribute(Svg::HEIGHT_ATTR)) {
-                    styleProps.pushBack(HeightProp{CalcValue<PercentOr<Length>>{PercentOr<Length>{Length{Au{150}}}}});
+                    styleProps.pushBack(HeightProp{Calc<Length>{Length{Au{150}}}});
                 }
             }
         }
diff --git a/src/vaev-engine/style/decls.cpp b/src/vaev-engine/style/decls.cpp
index cc89c40e..212c3392 100644
--- a/src/vaev-engine/style/decls.cpp
+++ b/src/vaev-engine/style/decls.cpp
@@ -276,8 +276,8 @@ export void parseSVGPresentationAttribute(Symbol presentationAttr, Str style, Ve
 
                     if constexpr (Meta::Constructible<decltype(propAsNumber.value), Length>) {
                         propAsNumber.value = Length{Au{maybeNumber.take()}};
-                    } else if constexpr (Meta::Constructible<decltype(propAsNumber.value), CalcValue<PercentOr<Length>>>) {
-                        propAsNumber.value = CalcValue<PercentOr<Length>>{Length{Au{maybeNumber.take()}}};
+                    } else if constexpr (Meta::Constructible<decltype(propAsNumber.value), Calc<Length>>) {
+                        propAsNumber.value = Calc<Length>{Length{Au{maybeNumber.take()}}};
                     } else {
                         return true;
                     }
diff --git a/src/vaev-engine/style/props.cpp b/src/vaev-engine/style/props.cpp
index 678bc6b3..dbc0e9f4 100644
--- a/src/vaev-engine/style/props.cpp
+++ b/src/vaev-engine/style/props.cpp
@@ -812,7 +812,7 @@ export struct BorderBottomWidthProp {
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
@@ -841,12 +841,12 @@ export struct BorderLeftWidthProp {
 
 // https://drafts.csswg.org/css-backgrounds/#the-border-radius
 export struct BorderRadiusTopRight {
-    Array<CalcValue<PercentOr<Length>>, 2> value = initial();
+    Array<Calc<Length>, 2> value = initial();
 
     static constexpr Str name() { return "border-top-right-radius"; }
 
-    static constexpr Array<CalcValue<PercentOr<Length>>, 2> initial() {
-        return makeArray<CalcValue<PercentOr<Length>>, 2>(Length{});
+    static constexpr Array<Calc<Length>, 2> initial() {
+        return makeArray<Calc<Length>, 2>(Length{});
     }
 
     void apply(SpecifiedValues& c) const {
@@ -854,7 +854,7 @@ export struct BorderRadiusTopRight {
         c.borders.cow().radii.d = value[1];
     }
 
-    static Array<CalcValue<PercentOr<Length>>, 2> load(SpecifiedValues const& c) {
+    static Array<Calc<Length>, 2> load(SpecifiedValues const& c) {
         return {
             c.borders->radii.c,
             c.borders->radii.d,
@@ -862,11 +862,11 @@ export struct BorderRadiusTopRight {
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value[0] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value[0] = try$(parseValue<Calc<Length>>(c));
         if (c.ended()) {
             value[1] = value[0];
         } else {
-            value[1] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+            value[1] = try$(parseValue<Calc<Length>>(c));
         }
 
         return Ok();
@@ -875,12 +875,12 @@ export struct BorderRadiusTopRight {
 
 // https://drafts.csswg.org/css-backgrounds/#the-border-radius
 export struct BorderRadiusTopLeft {
-    Array<CalcValue<PercentOr<Length>>, 2> value = initial();
+    Array<Calc<Length>, 2> value = initial();
 
     static constexpr Str name() { return "border-top-left-radius"; }
 
-    static constexpr Array<CalcValue<PercentOr<Length>>, 2> initial() {
-        return makeArray<CalcValue<PercentOr<Length>>, 2>(Length{});
+    static constexpr Array<Calc<Length>, 2> initial() {
+        return makeArray<Calc<Length>, 2>(Length{});
     }
 
     void apply(SpecifiedValues& c) const {
@@ -888,7 +888,7 @@ export struct BorderRadiusTopLeft {
         c.borders.cow().radii.b = value[0];
     }
 
-    static Array<CalcValue<PercentOr<Length>>, 2> load(SpecifiedValues const& c) {
+    static Array<Calc<Length>, 2> load(SpecifiedValues const& c) {
         return {
             c.borders->radii.a,
             c.borders->radii.b,
@@ -896,12 +896,12 @@ export struct BorderRadiusTopLeft {
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value[0] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value[0] = try$(parseValue<Calc<Length>>(c));
         eatWhitespace(c);
         if (c.ended()) {
             value[1] = value[0];
         } else {
-            value[1] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+            value[1] = try$(parseValue<Calc<Length>>(c));
         }
 
         return Ok();
@@ -910,12 +910,12 @@ export struct BorderRadiusTopLeft {
 
 // https://drafts.csswg.org/css-backgrounds/#the-border-radius
 export struct BorderRadiusBottomRight {
-    Array<CalcValue<PercentOr<Length>>, 2> value = initial();
+    Array<Calc<Length>, 2> value = initial();
 
     static constexpr Str name() { return "border-bottom-right-radius"; }
 
-    static constexpr Array<CalcValue<PercentOr<Length>>, 2> initial() {
-        return makeArray<CalcValue<PercentOr<Length>>, 2>(Length{});
+    static constexpr Array<Calc<Length>, 2> initial() {
+        return makeArray<Calc<Length>, 2>(Length{});
     }
 
     void apply(SpecifiedValues& c) const {
@@ -923,7 +923,7 @@ export struct BorderRadiusBottomRight {
         c.borders.cow().radii.f = value[0];
     }
 
-    static Array<CalcValue<PercentOr<Length>>, 2> load(SpecifiedValues const& c) {
+    static Array<Calc<Length>, 2> load(SpecifiedValues const& c) {
         return {
             c.borders->radii.e,
             c.borders->radii.f,
@@ -931,11 +931,11 @@ export struct BorderRadiusBottomRight {
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value[0] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value[0] = try$(parseValue<Calc<Length>>(c));
         if (c.ended()) {
             value[1] = value[0];
         } else {
-            value[1] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+            value[1] = try$(parseValue<Calc<Length>>(c));
         }
 
         return Ok();
@@ -944,12 +944,12 @@ export struct BorderRadiusBottomRight {
 
 // https://drafts.csswg.org/css-backgrounds/#the-border-radius
 export struct BorderRadiusBottomLeft {
-    Array<CalcValue<PercentOr<Length>>, 2> value = initial();
+    Array<Calc<Length>, 2> value = initial();
 
     static constexpr Str name() { return "border-bottom-left-radius"; }
 
-    static constexpr Array<CalcValue<PercentOr<Length>>, 2> initial() {
-        return makeArray<CalcValue<PercentOr<Length>>, 2>(Length{});
+    static constexpr Array<Calc<Length>, 2> initial() {
+        return makeArray<Calc<Length>, 2>(Length{});
     }
 
     void apply(SpecifiedValues& c) const {
@@ -957,7 +957,7 @@ export struct BorderRadiusBottomLeft {
         c.borders.cow().radii.h = value[1];
     }
 
-    static Array<CalcValue<PercentOr<Length>>, 2> load(SpecifiedValues const& c) {
+    static Array<Calc<Length>, 2> load(SpecifiedValues const& c) {
         return {
             c.borders->radii.g,
             c.borders->radii.h,
@@ -965,11 +965,11 @@ export struct BorderRadiusBottomLeft {
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value[0] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value[0] = try$(parseValue<Calc<Length>>(c));
         if (c.ended()) {
             value[1] = value[0];
         } else {
-            value[1] = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+            value[1] = try$(parseValue<Calc<Length>>(c));
         }
 
         return Ok();
@@ -978,22 +978,22 @@ export struct BorderRadiusBottomLeft {
 
 // https://drafts.csswg.org/css-backgrounds/#the-border-radius
 export struct BorderRadius {
-    Math::Radii<CalcValue<PercentOr<Length>>> value = initial();
+    Math::Radii<Calc<Length>> value = initial();
 
     static constexpr Str name() { return "border-radius"; }
 
-    static Math::Radii<CalcValue<PercentOr<Length>>> initial() { return {CalcValue<PercentOr<Length>>(Length{})}; }
+    static Math::Radii<Calc<Length>>> initial() { return {Calc<Length>(Length{})}; }
 
     void apply(SpecifiedValues& c) const {
         c.borders.cow().radii = value;
     }
 
-    static Math::Radii<CalcValue<PercentOr<Length>>> load(SpecifiedValues const& c) {
+    static Math::Radii<Calc<Length>> load(SpecifiedValues const& c) {
         return c.borders->radii;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<Math::Radii<CalcValue<PercentOr<Length>>>>(c));
+        value = try$(parseValue<Math::Radii<Calc<Length>>>(c));
         return Ok();
     }
 };
@@ -1014,7 +1014,7 @@ export struct BorderTopProp {
 
     Res<> parse(Cursor<Css::Sst>& c) {
         while (not c.ended()) {
-            auto width = parseValue<CalcValue<Length>>(c);
+            auto width = parseValue<Calc<Length>>(c);
             if (width) {
                 value.width = width.unwrap();
                 continue;
@@ -1055,7 +1055,7 @@ export struct BorderRightProp {
 
     Res<> parse(Cursor<Css::Sst>& c) {
         while (not c.ended()) {
-            auto width = parseValue<CalcValue<Length>>(c);
+            auto width = parseValue<Calc<Length>>(c);
             if (width) {
                 value.width = width.unwrap();
                 continue;
@@ -1096,7 +1096,7 @@ export struct BorderBottomProp {
 
     Res<> parse(Cursor<Css::Sst>& c) {
         while (not c.ended()) {
-            auto width = parseValue<CalcValue<Length>>(c);
+            auto width = parseValue<Calc<Length>>(c);
             if (width) {
                 value.width = width.unwrap();
                 continue;
@@ -1137,7 +1137,7 @@ export struct BorderLeftProp {
 
     Res<> parse(Cursor<Css::Sst>& c) {
         while (not c.ended()) {
-            auto width = parseValue<CalcValue<Length>>(c);
+            auto width = parseValue<Calc<Length>>(c);
             if (width) {
                 value.width = width.unwrap();
                 continue;
@@ -1585,7 +1585,7 @@ export struct FlexProp {
 
         // deafult values if these parameters are omitted
         value.flexGrow = value.flexShrink = 1;
-        value.flexBasis = CalcValue<PercentOr<Length>>(Length{});
+        value.flexBasis = Calc<Length>(Length{});
 
         auto parseGrowShrink = [](Cursor<Css::Sst>& c, FlexItemProps& value) -> Res<> {
             auto grow = parseValue<Number>(c);
@@ -1911,7 +1911,7 @@ export struct MarginTopProp {
 
     static Str name() { return "margin-top"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         c.margin.cow().top = value;
@@ -1932,7 +1932,7 @@ export struct MarginRightProp {
 
     static Str name() { return "margin-right"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         c.margin.cow().end = value;
@@ -1953,7 +1953,7 @@ export struct MarginBottomProp {
 
     static constexpr Str name() { return "margin-bottom"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         c.margin.cow().bottom = value;
@@ -1974,7 +1974,7 @@ export struct MarginLeftProp {
 
     static Str name() { return "margin-left"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         c.margin.cow().start = value;
@@ -1995,7 +1995,7 @@ export struct MarginProp {
 
     static Str name() { return "margin"; }
 
-    static Math::Insets<Width> initial() { return {CalcValue<PercentOr<Length>>(Length{})}; }
+    static Math::Insets<Width> initial() { return {Calc<Length>(Length{})}; }
 
     void apply(SpecifiedValues& c) const {
         c.margin.cow() = value;
@@ -2018,7 +2018,7 @@ export struct MarginInlineStartProp {
 
     static Str name() { return "margin-inline-start"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         // FIXME: Take writing mode into account
@@ -2040,7 +2040,7 @@ export struct MarginInlineEndProp {
 
     static Str name() { return "margin-inline-end"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         // FIXME: Take writing mode into account
@@ -2062,7 +2062,7 @@ export struct MarginInlineProp {
 
     static Str name() { return "margin-inline"; }
 
-    static Math::Insets<Width> initial() { return {CalcValue<PercentOr<Length>>(Length{})}; }
+    static Math::Insets<Width> initial() { return {Calc<Length>(Length{})}; }
 
     void apply(SpecifiedValues& c) const {
         // FIXME: Take writing mode into account
@@ -2088,7 +2088,7 @@ export struct MarginBlockStartProp {
 
     static Str name() { return "margin-block-start"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         // FIXME: Take writing mode into account
@@ -2110,7 +2110,7 @@ export struct MarginBlockEndProp {
 
     static Str name() { return "margin-block-end"; }
 
-    static Width initial() { return CalcValue<PercentOr<Length>>(Length{}); }
+    static Width initial() { return Calc<Length>(Length{}); }
 
     void apply(SpecifiedValues& c) const {
         // FIXME: Take writing mode into account
@@ -2132,7 +2132,7 @@ export struct MarginBlockProp {
 
     static Str name() { return "margin-block"; }
 
-    static Math::Insets<Width> initial() { return {CalcValue<PercentOr<Length>>(Length{})}; }
+    static Math::Insets<Width> initial() { return {Calc<Length>(Length{})}; }
 
     void apply(SpecifiedValues& c) const {
         // FIXME: Take writing mode into account
@@ -2199,7 +2199,7 @@ export struct OutlineProp {
     Res<> parse(Cursor<Css::Sst>& c) {
         bool styleSet = false;
         while (not c.ended()) {
-            auto width = parseValue<CalcValue<Length>>(c);
+            auto width = parseValue<Calc<Length>>(c);
             if (width) {
                 value.width = width.unwrap();
                 continue;
@@ -2302,7 +2302,7 @@ export struct OutlineColorProp {
 
 // https://drafts.csswg.org/css-ui/#outline-offset
 export struct OutlineOffsetProp {
-    CalcValue<Length> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "outline-offset"; }
 
@@ -2312,12 +2312,12 @@ export struct OutlineOffsetProp {
         c.outline.cow().offset = value;
     }
 
-    static CalcValue<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.outline->offset;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
@@ -2452,7 +2452,7 @@ export struct OverflowProp {
 // https://www.w3.org/TR/css-box-3/#propdef-padding
 
 export struct PaddingTopProp {
-    CalcValue<PercentOr<Length>> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "padding-top"; }
 
@@ -2462,18 +2462,18 @@ export struct PaddingTopProp {
         c.padding.cow().top = value;
     }
 
-    static CalcValue<PercentOr<Length>> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.padding->top;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 export struct PaddingRightProp {
-    CalcValue<PercentOr<Length>> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "padding-right"; }
 
@@ -2483,18 +2483,18 @@ export struct PaddingRightProp {
         c.padding.cow().end = value;
     }
 
-    static CalcValue<PercentOr<Length>> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.padding->end;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 export struct PaddingBottomProp {
-    CalcValue<PercentOr<Length>> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "padding-bottom"; }
 
@@ -2504,18 +2504,18 @@ export struct PaddingBottomProp {
         c.padding.cow().bottom = value;
     }
 
-    static CalcValue<PercentOr<Length>> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.padding->bottom;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 export struct PaddingLeftProp {
-    CalcValue<PercentOr<Length>> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "padding-left"; }
 
@@ -2525,18 +2525,18 @@ export struct PaddingLeftProp {
         c.padding.cow().start = value;
     }
 
-    static CalcValue<PercentOr<Length>> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.padding->start;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 export struct PaddingInlineStart {
-    CalcValue<PercentOr<Length>> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "padding-inline-start"; }
 
@@ -2546,18 +2546,18 @@ export struct PaddingInlineStart {
         c.padding.cow().start = value;
     }
 
-    static CalcValue<PercentOr<Length>> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.padding->start;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 export struct PaddingInlineEnd {
-    CalcValue<PercentOr<Length>> value = initial();
+    Calc<Length> value = initial();
 
     static Str name() { return "padding-inline-end"; }
 
@@ -2567,33 +2567,33 @@ export struct PaddingInlineEnd {
         c.padding.cow().end = value;
     }
 
-    static CalcValue<PercentOr<Length>> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.padding->end;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<CalcValue<PercentOr<Length>>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 export struct PaddingProp {
-    Math::Insets<CalcValue<PercentOr<Length>>> value = initial();
+    Math::Insets<Calc<Length>> value = initial();
 
     static Str name() { return "padding"; }
 
-    static Math::Insets<CalcValue<PercentOr<Length>>> initial() { return {Length{}}; }
+    static Math::Insets<Calc<Length>> initial() { return {Length{}}; }
 
     void apply(SpecifiedValues& c) const {
         c.padding.cow() = value;
     }
 
-    static Math::Insets<CalcValue<PercentOr<Length>>> load(SpecifiedValues const& c) {
+    static Math::Insets<Calc<Length>> load(SpecifiedValues const& c) {
         return *c.padding;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<Math::Insets<CalcValue<PercentOr<Length>>>>(c));
+        value = try$(parseValue<Math::Insets<Calc<Length>>>(c));
         return Ok();
     }
 };
@@ -2987,8 +2987,8 @@ export struct TransformOriginProp {
 
     static TransformOrigin initial() {
         return {
-            .xOffset = CalcValue<PercentOr<Length>>{Percent{50}},
-            .yOffset = CalcValue<PercentOr<Length>>{Percent{50}},
+            .xOffset = Calc<Length>{Percent{50}},
+            .yOffset = Calc<Length>{Percent{50}},
         };
     }
 
@@ -3150,7 +3150,7 @@ export struct ZIndexProp {
 
 // https://svgwg.org/svg2-draft/geometry.html#XProperty
 export struct SVGXProp {
-    PercentOr<Length> value = initial();
+    Calc<Length> value = initial();
 
     static constexpr Str name() { return "x"; }
 
@@ -3160,19 +3160,19 @@ export struct SVGXProp {
         c.svg.cow().x = value;
     }
 
-    static PercentOr<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.svg->x;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<PercentOr<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 // https://svgwg.org/svg2-draft/geometry.html#YProperty
 export struct SVGYProp {
-    PercentOr<Length> value = initial();
+    Calc<Length> value = initial();
 
     static constexpr Str name() { return "y"; }
 
@@ -3182,19 +3182,19 @@ export struct SVGYProp {
         c.svg.cow().y = value;
     }
 
-    static PercentOr<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.svg->y;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<PercentOr<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 // https://svgwg.org/svg2-draft/geometry.html#CXProperty
 export struct SVGCXProp {
-    PercentOr<Length> value = initial();
+    Calc<Length> value = initial();
 
     static constexpr Str name() { return "cx"; }
 
@@ -3204,19 +3204,19 @@ export struct SVGCXProp {
         c.svg.cow().cx = value;
     }
 
-    static PercentOr<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.svg->cx;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<PercentOr<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 // https://svgwg.org/svg2-draft/geometry.html#CYProperty
 export struct SVGCYProp {
-    PercentOr<Length> value = initial();
+    Calc<Length> value = initial();
 
     static constexpr Str name() { return "cy"; }
 
@@ -3226,19 +3226,19 @@ export struct SVGCYProp {
         c.svg.cow().cy = value;
     }
 
-    static PercentOr<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.svg->cy;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<PercentOr<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
 
 // https://svgwg.org/svg2-draft/geometry.html#RProperty
 export struct SVGRProp {
-    PercentOr<Length> value = initial();
+    Calc<Length> value = initial();
 
     static constexpr Str name() { return "r"; }
 
@@ -3248,12 +3248,12 @@ export struct SVGRProp {
         c.svg.cow().r = value;
     }
 
-    static PercentOr<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.svg->r;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<PercentOr<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
@@ -3397,7 +3397,7 @@ export struct FillOpacityProp {
 
 // https://svgwg.org/svg2-draft/painting.html#StrokeWidth
 export struct StrokeWidthProp {
-    PercentOr<Length> value = initial();
+    Calc<Length> value = initial();
 
     static constexpr Str name() { return "stroke-width"; }
 
@@ -3407,12 +3407,12 @@ export struct StrokeWidthProp {
         c.svg.cow().strokeWidth = value;
     }
 
-    static PercentOr<Length> load(SpecifiedValues const& c) {
+    static Calc<Length> load(SpecifiedValues const& c) {
         return c.svg->strokeWidth;
     }
 
     Res<> parse(Cursor<Css::Sst>& c) {
-        value = try$(parseValue<PercentOr<Length>>(c));
+        value = try$(parseValue<Calc<Length>>(c));
         return Ok();
     }
 };
diff --git a/src/vaev-engine/style/specified.cpp b/src/vaev-engine/style/specified.cpp
index d23c9b46..16d49e5e 100644
--- a/src/vaev-engine/style/specified.cpp
+++ b/src/vaev-engine/style/specified.cpp
@@ -14,8 +14,8 @@ namespace Vaev::Style {
 struct TransformProps {
     Transform transform = Keywords::NONE;
     TransformOrigin origin = {
-        .xOffset = CalcValue<PercentOr<Length>>{Percent{0}},
-        .yOffset = CalcValue<PercentOr<Length>>{Percent{0}},
+        .xOffset = Calc<Length>{Percent{0}},
+        .yOffset = Calc<Length>{Percent{0}},
     };
     TransformBox box = Keywords::BORDER_BOX;
 
@@ -39,7 +39,7 @@ export struct SpecifiedValues {
 
     Cow<BackgroundProps> backgrounds;
     Cow<BorderProps> borders;
-    Cow<Margin> margin = makeCow<Margin>(Width(CalcValue<PercentOr<Length>>(Length(0_au)))); // FIXME
+    Cow<Margin> margin = makeCow<Margin>(Width(Calc<Length>(Length(0_au)))); // FIXME
     Cow<Outline> outline;
     Cow<Padding> padding = makeCow<Padding>(Length(0_au)); // FIXME
     BoxSizing boxSizing;
diff --git a/src/vaev-engine/style/tests/test-parse-value.cpp b/src/vaev-engine/style/tests/test-parse-value.cpp
index 2ecb82ff..d87a6ba4 100644
--- a/src/vaev-engine/style/tests/test-parse-value.cpp
+++ b/src/vaev-engine/style/tests/test-parse-value.cpp
@@ -86,33 +86,33 @@ test$("vaev-css-build-margin") {
 
     try$(testCase(
         "margin: 30px;",
-        Margin{Width{CalcValue<PercentOr<Length>>{Length{30_au}}}}
+        Margin{Width{Calc<Length>{Length{30_au}}}}
     ));
 
     try$(testCase(
         "margin: 1px 2px;",
         Margin{
-            Width{CalcValue<PercentOr<Length>>{Length{1_au}}},
-            Width{CalcValue<PercentOr<Length>>{Length{2_au}}},
+            Width{Calc<Length>{Length{1_au}}},
+            Width{Calc<Length>{Length{2_au}}},
         }
     ));
 
     try$(testCase(
         "margin: 1px 2px 3px;",
         Margin{
-            Width{CalcValue<PercentOr<Length>>{Length{1_au}}},
-            Width{CalcValue<PercentOr<Length>>{Length{2_au}}},
-            Width{CalcValue<PercentOr<Length>>{Length{3_au}}},
+            Width{Calc<Length>{Length{1_au}}},
+            Width{Calc<Length>{Length{2_au}}},
+            Width{Calc<Length>{Length{3_au}}},
         }
     ));
 
     try$(testCase(
         "margin: 1px 2px 3px 4px;",
         Margin{
-            Width{CalcValue<PercentOr<Length>>{Length{1_au}}},
-            Width{CalcValue<PercentOr<Length>>{Length{2_au}}},
-            Width{CalcValue<PercentOr<Length>>{Length{3_au}}},
-            Width{CalcValue<PercentOr<Length>>{Length{4_au}}},
+            Width{Calc<Length>{Length{1_au}}},
+            Width{Calc<Length>{Length{2_au}}},
+            Width{Calc<Length>{Length{3_au}}},
+            Width{Calc<Length>{Length{4_au}}},
         }
     ));
 
diff --git a/src/vaev-engine/values/background.cpp b/src/vaev-engine/values/background.cpp
index 36803395..3bc7e643 100644
--- a/src/vaev-engine/values/background.cpp
+++ b/src/vaev-engine/values/background.cpp
@@ -47,9 +47,9 @@ export struct BackgroundPosition {
     using VerticalAnchor = Union<Keywords::Top, Keywords::Center, Keywords::Bottom>;
 
     HorizontalAnchor horizontalAnchor;
-    CalcValue<PercentOr<Length>> horizontal;
+    Calc<Length> horizontal;
     VerticalAnchor verticalAnchor;
-    CalcValue<PercentOr<Length>> vertical;
+    Calc<Length> vertical;
 
     constexpr BackgroundPosition()
         : horizontalAnchor(Keywords::LEFT),
@@ -58,11 +58,11 @@ export struct BackgroundPosition {
           vertical(Percent{0}) {
     }
 
-    constexpr BackgroundPosition(CalcValue<PercentOr<Length>> horizontal, CalcValue<PercentOr<Length>> vertical)
+    constexpr BackgroundPosition(Calc<Length> horizontal, Calc<Length> vertical)
         : horizontalAnchor(Keywords::LEFT), horizontal(horizontal), verticalAnchor(Keywords::TOP), vertical(vertical) {
     }
 
-    constexpr BackgroundPosition(HorizontalAnchor horizontalAnchor, CalcValue<PercentOr<Length>> horizontal, VerticalAnchor verticalAnchor, CalcValue<PercentOr<Length>> vertical)
+    constexpr BackgroundPosition(HorizontalAnchor horizontalAnchor, Calc<Length> horizontal, VerticalAnchor verticalAnchor, Calc<Length> vertical)
         : horizontalAnchor(horizontalAnchor), horizontal(horizontal), verticalAnchor(verticalAnchor), vertical(vertical) {
     }
 
@@ -80,7 +80,7 @@ struct ValueParser<BackgroundPosition> {
         if (c.ended())
             return Error::invalidData("unexpected end of input");
 
-        using Item = FlatUnion<BackgroundPosition::HorizontalAnchor, BackgroundPosition::VerticalAnchor, CalcValue<PercentOr<Length>>>;
+        using Item = FlatUnion<BackgroundPosition::HorizontalAnchor, BackgroundPosition::VerticalAnchor, Calc<Length>>;
 
         InlineVec<Item, 4> items;
         for (int i = 0; i < 4 && not c.ended(); ++i) {
@@ -108,16 +108,16 @@ struct ValueParser<BackgroundPosition> {
                 items.pushBack(items.popFront());
 
             BackgroundPosition::HorizontalAnchor hAnchor = Keywords::LEFT;
-            CalcValue<PercentOr<Length>> hValue = {Percent(0)};
+            Calc<Length> hValue = {Percent(0)};
             BackgroundPosition::VerticalAnchor vAnchor = Keywords::TOP;
-            CalcValue<PercentOr<Length>> vValue = {Percent(0)};
+            Calc<Length> vValue = {Percent(0)};
 
             try$(items[0].visit(Visitor{
                 [&](Meta::Contains<Keywords::Left, Keywords::Right, Keywords::Center> auto& t) -> Res<> {
                     hAnchor = t;
                     return Ok();
                 },
-                [&](CalcValue<PercentOr<Length>>& t) -> Res<> {
+                [&](Calc<Length>& t) -> Res<> {
                     hValue = t;
                     return Ok();
                 },
@@ -131,7 +131,7 @@ struct ValueParser<BackgroundPosition> {
                     vAnchor = t;
                     return Ok();
                 },
-                [&](CalcValue<PercentOr<Length>>& t) -> Res<> {
+                [&](Calc<Length>& t) -> Res<> {
                     vValue = t;
                     return Ok();
                 },
@@ -145,11 +145,11 @@ struct ValueParser<BackgroundPosition> {
 
         // case 3
         BackgroundPosition::HorizontalAnchor hAnchor = Keywords::LEFT;
-        CalcValue<PercentOr<Length>> hValue = {Percent(0)};
+        Calc<Length> hValue = {Percent(0)};
         bool hSet = false;
 
         BackgroundPosition::VerticalAnchor vAnchor = Keywords::TOP;
-        CalcValue<PercentOr<Length>> vValue = {Percent(0)};
+        Calc<Length> vValue = {Percent(0)};
 
         usize secondPairIndex = 2;
 
@@ -158,7 +158,7 @@ struct ValueParser<BackgroundPosition> {
                 hAnchor = t;
                 hSet = true;
 
-                if (auto mesure = items[1].is<CalcValue<PercentOr<Length>>>()) {
+                if (auto mesure = items[1].is<Calc<Length>>()) {
                     hValue = *mesure;
                 } else {
                     secondPairIndex = 1;
@@ -177,7 +177,7 @@ struct ValueParser<BackgroundPosition> {
             [&](Meta::Contains<Keywords::Top, Keywords::Bottom> auto& t) -> Res<> {
                 vAnchor = t;
 
-                if (auto mesure = items[1].is<CalcValue<PercentOr<Length>>>()) {
+                if (auto mesure = items[1].is<Calc<Length>>()) {
                     vValue = *mesure;
                 } else {
                     secondPairIndex = 1;
@@ -204,7 +204,7 @@ struct ValueParser<BackgroundPosition> {
                 hAnchor = t;
 
                 if (secondPairIndex + 1 < items.len()) {
-                    if (auto mesure = items[secondPairIndex + 1].is<CalcValue<PercentOr<Length>>>())
+                    if (auto mesure = items[secondPairIndex + 1].is<Calc<Length>>())
                         hValue = *mesure;
                     else {
                         return Error::invalidData("expected percent or length");
@@ -217,7 +217,7 @@ struct ValueParser<BackgroundPosition> {
                 vAnchor = t;
 
                 if (secondPairIndex + 1 < items.len()) {
-                    if (auto mesure = items[secondPairIndex + 1].is<CalcValue<PercentOr<Length>>>())
+                    if (auto mesure = items[secondPairIndex + 1].is<Calc<Length>>())
                         vValue = *mesure;
                     else {
                         return Error::invalidData("unexpected last value");
diff --git a/src/vaev-engine/values/basic-shape.cpp b/src/vaev-engine/values/basic-shape.cpp
index 897fc5ef..a94cab36 100644
--- a/src/vaev-engine/values/basic-shape.cpp
+++ b/src/vaev-engine/values/basic-shape.cpp
@@ -51,7 +51,7 @@ export Gfx::FillRule fillRuleToGfx(FillRule rule) {
 }
 
 export using ShapeRadius = Union<
-    CalcValue<PercentOr<Length>>,
+    Calc<Length>,
     Keywords::ClosestSide,
     Keywords::FarthestSide>;
 
@@ -152,8 +152,8 @@ struct ValueParser<Ellipse> {
 // https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-inset
 
 export struct Inset {
-    Math::Insets<CalcValue<PercentOr<Length>>> insets = {Percent(0)};
-    Math::Radii<CalcValue<PercentOr<Length>>> borderRadius = {Percent(0)};
+    Math::Insets<Calc<Length>> insets = {Percent(0)};
+    Math::Radii<Calc<Length>> borderRadius = {Percent(0)};
 
     void repr(Io::Emit& e) const {
         e("(inset {} {})", insets, borderRadius);
@@ -170,7 +170,7 @@ struct ValueParser<Inset> {
             Inset result;
             Cursor<Css::Sst> scan = c->content;
 
-            if (auto insets = parseValue<Math::Insets<CalcValue<PercentOr<Length>>>>(scan)) {
+            if (auto insets = parseValue<Math::Insets<Calc<Length>>>(scan)) {
                 result.insets = insets.unwrap();
             } else {
                 return Error::invalidData("expected insets");
@@ -179,7 +179,7 @@ struct ValueParser<Inset> {
             eatWhitespace(scan);
             if (scan.skip(Css::Token::ident("round"))) {
                 eatWhitespace(scan);
-                if (auto radii = parseValue<Math::Radii<CalcValue<PercentOr<Length>>>>(scan)) {
+                if (auto radii = parseValue<Math::Radii<Calc<Length>>>(scan)) {
                     result.borderRadius = radii.unwrap();
                 }
                 eatWhitespace(scan);
@@ -249,7 +249,7 @@ struct ValueParser<Path> {
 
 export struct Polygon {
     Gfx::FillRule fillRule = Gfx::FillRule::NONZERO;
-    Vec<Pair<CalcValue<PercentOr<Length>>>> points;
+    Vec<Pair<Calc<Length>>> points;
 
     void repr(Io::Emit& e) const {
         e("(polygon {} {})", fillRule, points);
@@ -276,9 +276,9 @@ struct ValueParser<Polygon> {
                 begin = false;
 
                 eatWhitespace(scan);
-                auto x = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+                auto x = try$(parseValue<Calc<Length>>(scan));
                 eatWhitespace(scan);
-                auto y = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+                auto y = try$(parseValue<Calc<Length>>(scan));
                 eatWhitespace(scan);
                 result.points.emplaceBack(x, y);
             }
@@ -297,8 +297,8 @@ struct ValueParser<Polygon> {
 // https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-rect
 
 export struct Rect {
-    Math::Insets<CalcValue<PercentOr<Length>>> insets = {Percent(0), Percent(100), Percent(100), Percent(0)};
-    Math::Radii<CalcValue<PercentOr<Length>>> borderRadius = {Percent(0)};
+    Math::Insets<Calc<Length>> insets = {Percent(0), Percent(100), Percent(100), Percent(0)};
+    Math::Radii<Calc<Length>> borderRadius = {Percent(0)};
 
     void repr(Io::Emit& e) const {
         e("(rect {} {})", insets, borderRadius);
@@ -317,24 +317,24 @@ struct ValueParser<Rect> {
 
             eatWhitespace(scan);
             if (not parseValue<Keywords::Auto>(scan))
-                result.insets.top = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+                result.insets.top = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
             if (not parseValue<Keywords::Auto>(scan))
-                result.insets.end = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+                result.insets.end = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
             if (not parseValue<Keywords::Auto>(scan))
-                result.insets.bottom = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+                result.insets.bottom = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
             if (not parseValue<Keywords::Auto>(scan))
-                result.insets.start = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+                result.insets.start = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
             if (scan.skip(Css::Token::ident("round"))) {
                 eatWhitespace(scan);
-                if (auto radii = parseValue<Math::Radii<CalcValue<PercentOr<Length>>>>(scan)) {
+                if (auto radii = parseValue<Math::Radii<Calc<Length>>>(scan)) {
                     result.borderRadius = radii.unwrap();
                 }
                 eatWhitespace(scan);
@@ -353,8 +353,8 @@ struct ValueParser<Rect> {
 // https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-xywh
 
 export struct Xywh {
-    Math::Rect<CalcValue<PercentOr<Length>>> rect = {Percent(0), Percent(0), Percent(0), Percent(0)};
-    Math::Radii<CalcValue<PercentOr<Length>>> borderRadius = {Percent(0)};
+    Math::Rect<Calc<Length>> rect = {Percent(0), Percent(0), Percent(0), Percent(0)};
+    Math::Radii<Calc<Length>> borderRadius = {Percent(0)};
 
     void repr(Io::Emit& e) const {
         e("(xywh {} {})", rect, borderRadius);
@@ -372,21 +372,21 @@ struct ValueParser<Xywh> {
             Cursor<Css::Sst> scan = c->content;
 
             eatWhitespace(scan);
-            result.rect.x = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+            result.rect.x = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
-            result.rect.y = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+            result.rect.y = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
-            result.rect.width = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+            result.rect.width = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
-            result.rect.height = try$(parseValue<CalcValue<PercentOr<Length>>>(scan));
+            result.rect.height = try$(parseValue<Calc<Length>>(scan));
 
             eatWhitespace(scan);
             if (scan.skip(Css::Token::ident("round"))) {
                 eatWhitespace(scan);
-                if (auto radii = parseValue<Math::Radii<CalcValue<PercentOr<Length>>>>(scan)) {
+                if (auto radii = parseValue<Math::Radii<Calc<Length>>>(scan)) {
                     result.borderRadius = radii.unwrap();
                 }
                 eatWhitespace(scan);
diff --git a/src/vaev-engine/values/borders.cpp b/src/vaev-engine/values/borders.cpp
index 336f39c3..bf7ef664 100644
--- a/src/vaev-engine/values/borders.cpp
+++ b/src/vaev-engine/values/borders.cpp
@@ -92,7 +92,7 @@ struct ValueParser<Border> {
 
 export struct BorderProps {
     Border top, start, bottom, end;
-    Math::Radii<CalcValue<PercentOr<Length>>> radii = {Length(0_au)};
+    Math::Radii<Calc<Length>> radii = {Length(0_au)};
 
     void all(Border b) {
         top = start = bottom = end = b;
@@ -115,19 +115,19 @@ struct ValueParser<Math::Radii<T>> {
         if (c.ended())
             return Error::invalidData("unexpected end of input");
 
-        auto value1 = parseValue<PercentOr<Length>>(c);
+        auto value1 = parseValue<Calc<Length>>(c);
         if (not value1)
             return Ok(parsePostSlash(c, Math::Radii<T>{Length{}}));
 
-        auto value2 = parseValue<PercentOr<Length>>(c);
+        auto value2 = parseValue<Calc<Length>>(c);
         if (not value2)
             return Ok(parsePostSlash(c, Math::Radii<T>{value1.take()}));
 
-        auto value3 = parseValue<PercentOr<Length>>(c);
+        auto value3 = parseValue<Calc<Length>>(c);
         if (not value3)
             return Ok(parsePostSlash(c, Math::Radii<T>{value1.take(), value2.take()}));
 
-        auto value4 = parseValue<PercentOr<Length>>(c);
+        auto value4 = parseValue<Calc<Length>>(c);
         if (not value4)
             return Ok(parsePostSlash(c, Math::Radii<T>{value1.take(), value2.take(), value3.take(), value2.take()}));
 
@@ -144,12 +144,12 @@ struct ValueParser<Math::Radii<T>> {
         if (not c.ended() and c.peek().token.data == "/"s) {
             c.next();
             eatWhitespace(c);
-            auto value1 = parseValue<PercentOr<Length>>(c);
+            auto value1 = parseValue<Calc<Length>>(c);
             if (not value1) {
                 return radii;
             }
 
-            auto value2 = parseValue<PercentOr<Length>>(c);
+            auto value2 = parseValue<Calc<Length>>(c);
             if (not value2) {
                 radii.a = value1.take();
                 radii.d = value1.take();
@@ -159,7 +159,7 @@ struct ValueParser<Math::Radii<T>> {
             }
 
             eatWhitespace(c);
-            auto value3 = parseValue<PercentOr<Length>>(c);
+            auto value3 = parseValue<Calc<Length>>(c);
             if (not value3) {
                 radii.a = value1.take();
                 radii.d = value2.take();
@@ -169,7 +169,7 @@ struct ValueParser<Math::Radii<T>> {
             }
 
             eatWhitespace(c);
-            auto value4 = parseValue<PercentOr<Length>>(c);
+            auto value4 = parseValue<Calc<Length>>(c);
             if (not value4) {
                 radii.a = value1.take();
                 radii.d = value2.take();
diff --git a/src/vaev-engine/values/calc.cpp b/src/vaev-engine/values/calc.cpp
index 194d360f..8f882a20 100644
--- a/src/vaev-engine/values/calc.cpp
+++ b/src/vaev-engine/values/calc.cpp
@@ -10,6 +10,7 @@ import :css;
 import :values.base;
 import :values.length;
 import :values.primitives;
+import :values.percent;
 
 using namespace Karm;
 
@@ -32,11 +33,12 @@ export enum struct CalcOp {
 // 10. Mathematical Expressions
 // https://drafts.csswg.org/css-values/#math
 export template <typename T>
-struct CalcValue {
-    using Leaf = Box<CalcValue<T>>;
+struct Calc {
+    using Leaf = Box<Calc>;
 
     using Value = Union<
         T,
+        Percent,
         Leaf,
         Number>;
 
@@ -58,23 +60,23 @@ struct CalcValue {
 
     Inner _inner;
 
-    constexpr CalcValue()
-        : CalcValue(T{}) {
+    constexpr Calc()
+        : Calc(T{}) {
     }
 
-    constexpr CalcValue(Meta::Convertible<T> auto val)
+    constexpr Calc(Meta::Convertible<T> auto val)
         : _inner(Value{T{val}}) {
     }
 
-    constexpr CalcValue(Value val)
+    constexpr Calc(Value val)
         : _inner(val) {
     }
 
-    constexpr CalcValue(CalcOp op, Value val)
+    constexpr Calc(CalcOp op, Value val)
         : _inner(makeBox<Unary>(op, val)) {
     }
 
-    constexpr CalcValue(CalcOp op, Value lhs, Value rhs)
+    constexpr Calc(CalcOp op, Value lhs, Value rhs)
         : _inner(makeBox<Binary>(op, lhs, rhs)) {
     }
 
@@ -108,8 +110,8 @@ struct CalcValue {
 };
 
 export template <typename T>
-struct ValueParser<CalcValue<T>> {
-    static Res<CalcValue<T>> parse(Cursor<Css::Sst>& c) {
+struct ValueParser<Calc<T>> {
+    static Res<Calc<T>> parse(Cursor<Css::Sst>& c) {
         if (c.ended())
             return Error::invalidData("unexpected end of input");
 
@@ -123,13 +125,13 @@ struct ValueParser<CalcValue<T>> {
 
                 auto op = parseOp(content);
                 if (not op)
-                    return Ok(CalcValue<T>{lhs});
+                    return Ok(Calc<T>{lhs});
 
                 if (content.peek() == Css::Token::WHITESPACE) {
                     content.next();
                 }
                 auto rhs = try$(parseVal(content));
-                return Ok(CalcValue<T>{op.unwrap(), lhs, rhs});
+                return Ok(Calc<T>{op.unwrap(), lhs, rhs});
             }
         }
 
@@ -161,7 +163,7 @@ struct ValueParser<CalcValue<T>> {
         return Error::invalidData("unexpected operator");
     }
 
-    static Res<typename CalcValue<T>::Value> parseVal(Cursor<Css::Sst>& c) {
+    static Res<typename Calc<T>::Value> parseVal(Cursor<Css::Sst>& c) {
         if (c.ended())
             return Error::invalidData("unexpected end of input");
 
diff --git a/src/vaev-engine/values/font.cpp b/src/vaev-engine/values/font.cpp
index 0feceb3a..9e168b29 100644
--- a/src/vaev-engine/values/font.cpp
+++ b/src/vaev-engine/values/font.cpp
@@ -260,13 +260,13 @@ export struct FontSize {
     using enum _Named;
 
     _Named _named;
-    PercentOr<Length> _value;
+    Calc<Length> _value;
 
     constexpr FontSize(_Named named = MEDIUM)
         : _named(named), _value(Length{}) {
     }
 
-    constexpr FontSize(PercentOr<Length> size)
+    constexpr FontSize(Calc<Length> size)
         : _named(LENGTH), _value(size) {
     }
 
@@ -274,7 +274,7 @@ export struct FontSize {
         return _named;
     }
 
-    PercentOr<Length> value() const {
+    Calc<Length> value() const {
         if (_named != LENGTH)
             panic("not a length");
         return _value;
@@ -314,7 +314,7 @@ struct ValueParser<FontSize> {
         else if (c.skip(Css::Token::ident("larger")))
             return Ok(FontSize::LARGER);
         else
-            return Ok(try$(parseValue<PercentOr<Length>>(c)));
+            return Ok(try$(parseValue<Calc<Length>>(c)));
     }
 };
 
diff --git a/src/vaev-engine/values/insets.cpp b/src/vaev-engine/values/insets.cpp
index 8dc04404..a5363d55 100644
--- a/src/vaev-engine/values/insets.cpp
+++ b/src/vaev-engine/values/insets.cpp
@@ -51,7 +51,7 @@ struct ValueParser<Position> {
 
 export using Margin = Math::Insets<Width>;
 
-export using Padding = Math::Insets<CalcValue<PercentOr<Length>>>;
+export using Padding = Math::Insets<Calc<Length>>;
 
 // https://www.w3.org/TR/CSS22/visuren.html#propdef-top
 // https://www.w3.org/TR/CSS22/visuren.html#propdef-right
@@ -87,7 +87,7 @@ struct ValueParser<Math::Insets<T>> {
 
 export using Gap = Union<
     Keywords::Normal,
-    CalcValue<PercentOr<Length>>>;
+    Calc<Length>>;
 
 export struct Gaps {
     Gap x = Keywords::NORMAL;
diff --git a/src/vaev-engine/values/line-height.cpp b/src/vaev-engine/values/line-height.cpp
index 5cbe4525..76df6adb 100644
--- a/src/vaev-engine/values/line-height.cpp
+++ b/src/vaev-engine/values/line-height.cpp
@@ -16,15 +16,16 @@ using namespace Karm;
 
 namespace Vaev {
 
+// https://drafts.csswg.org/css-inline/#line-height-property
 export struct LineHeight {
     struct _Normal {};
 
     static constexpr _Normal NORMAL = {};
-    Union<PercentOr<Length>, Number> _value;
+    Union<Calc<Length>, Number> _value;
 
     LineHeight(_Normal) : _value(1.2) {}
 
-    LineHeight(PercentOr<Length> value) : _value(value) {}
+    LineHeight(Calc<Length> value) : _value(value) {}
 
     LineHeight(Number value) : _value(value) {}
 
@@ -52,7 +53,7 @@ struct ValueParser<LineHeight> {
             }
         }
 
-        return Ok(LineHeight{try$(parseValue<PercentOr<Length>>(c))});
+        return Ok(LineHeight{try$(parseValue<Calc<Length>>(c))});
     }
 };
 
diff --git a/src/vaev-engine/values/line-width.cpp b/src/vaev-engine/values/line-width.cpp
index 3c47a0c2..914e0be4 100644
--- a/src/vaev-engine/values/line-width.cpp
+++ b/src/vaev-engine/values/line-width.cpp
@@ -25,7 +25,7 @@ export using LineWidth = Union<
     Keywords::Thin,
     Keywords::Medium,
     Keywords::Thick,
-    CalcValue<Length>>;
+    Calc<Length>>;
 
 export template <>
 struct ValueParser<LineWidth> {
@@ -46,7 +46,7 @@ struct ValueParser<LineWidth> {
             return Ok(Keywords::THICK);
         }
 
-        return Ok(try$(parseValue<CalcValue<Length>>(c)));
+        return Ok(try$(parseValue<Calc<Length>>(c)));
     }
 };
 
diff --git a/src/vaev-engine/values/outline.cpp b/src/vaev-engine/values/outline.cpp
index d7816ac6..631840df 100644
--- a/src/vaev-engine/values/outline.cpp
+++ b/src/vaev-engine/values/outline.cpp
@@ -11,7 +11,7 @@ namespace Vaev {
 // https://drafts.csswg.org/css-ui/#outline
 export struct Outline {
     LineWidth width = Keywords::MEDIUM;
-    CalcValue<Length> offset = 0_au;
+    Calc<Length> offset = 0_au;
     Union<Keywords::Auto, Gfx::BorderStyle> style = Gfx::BorderStyle::NONE;
     Union<Keywords::Auto, Color> color = Keywords::AUTO;
 
diff --git a/src/vaev-engine/values/percent.cpp b/src/vaev-engine/values/percent.cpp
index 97ef3919..23d1a51a 100644
--- a/src/vaev-engine/values/percent.cpp
+++ b/src/vaev-engine/values/percent.cpp
@@ -32,14 +32,6 @@ struct ValueParser<Percent> {
     }
 };
 
-export template <typename T>
-using PercentOr = Union<Percent, T>;
-
-export template <typename T>
-struct _Resolved<PercentOr<T>> {
-    using Type = Resolved<T>;
-};
-
 } // namespace Vaev
 
 export template <>
diff --git a/src/vaev-engine/values/sizing.cpp b/src/vaev-engine/values/sizing.cpp
index 373ff647..052ce8ec 100644
--- a/src/vaev-engine/values/sizing.cpp
+++ b/src/vaev-engine/values/sizing.cpp
@@ -28,7 +28,7 @@ export enum struct BoxSizing : u8 {
 // https://drafts.csswg.org/css-sizing-3/#preferred-size-properties
 
 export struct FitContent {
-    CalcValue<PercentOr<Length>> value = {Length{}};
+    Calc<Length> value = {Length{}};
 
     void repr(Io::Emit& e) const {
         e("(fit-content {})", value);
@@ -44,7 +44,7 @@ struct ValueParser<FitContent> {
         if (c->prefix == Css::Token::function("fit-content(")) {
             FitContent result;
             Cursor<Css::Sst> scan = c->content;
-            result.value = try$(parseValue<PercentOr<Length>>(scan));
+            result.value = try$(parseValue<Calc<Length>>(scan));
             c.next();
             return Ok(result);
         }
@@ -54,8 +54,8 @@ struct ValueParser<FitContent> {
 
 // https://www.w3.org/TR/css-sizing-3/#propdef-width
 // https://www.w3.org/TR/css-sizing-3/#propdef-height
-export using Size = FlatUnion<Keywords::Auto, CalcValue<PercentOr<Length>>, Keywords::MinContent, Keywords::MaxContent, FitContent>;
-export using MaxSize = FlatUnion<Keywords::None, CalcValue<PercentOr<Length>>, Keywords::MinContent, Keywords::MaxContent, FitContent>;
+export using Size = FlatUnion<Keywords::Auto, Calc<Length>, Keywords::MinContent, Keywords::MaxContent, FitContent>;
+export using MaxSize = FlatUnion<Keywords::None, Calc<Length>, Keywords::MinContent, Keywords::MaxContent, FitContent>;
 
 export struct SizingProps {
     Size width = Keywords::AUTO, height = Keywords::AUTO;
diff --git a/src/vaev-engine/values/svg.cpp b/src/vaev-engine/values/svg.cpp
index b0a94d9e..8ead9548 100644
--- a/src/vaev-engine/values/svg.cpp
+++ b/src/vaev-engine/values/svg.cpp
@@ -56,14 +56,14 @@ export struct ViewBox {
 };
 
 export struct SVGProps {
-    PercentOr<Length> x = Length{0_au};
-    PercentOr<Length> y = Length{0_au};
-    PercentOr<Length> cx = Length{0_au};
-    PercentOr<Length> cy = Length{0_au};
-    PercentOr<Length> r = Length{0_au};
+    Calc<Length> x = Length{0_au};
+    Calc<Length> y = Length{0_au};
+    Calc<Length> cx = Length{0_au};
+    Calc<Length> cy = Length{0_au};
+    Calc<Length> r = Length{0_au};
 
     Number fillOpacity = 1;
-    PercentOr<Length> strokeWidth = Length{1_au};
+    Calc<Length> strokeWidth = Length{1_au};
 
     Union<String, None> d = NONE;
 
diff --git a/src/vaev-engine/values/transform.cpp b/src/vaev-engine/values/transform.cpp
index aea77233..338297aa 100644
--- a/src/vaev-engine/values/transform.cpp
+++ b/src/vaev-engine/values/transform.cpp
@@ -24,12 +24,12 @@ namespace Vaev {
 // https://drafts.csswg.org/css-transforms/#transform-origin-property
 
 export struct TransformOrigin {
-    using OneValue = Union<Keywords::Left, Keywords::Center, Keywords::Right, CalcValue<PercentOr<Length>>>;
+    using OneValue = Union<Keywords::Left, Keywords::Center, Keywords::Right, Calc<Length>>;
 
     using XOffsetKeyword = Union<Keywords::Left, Keywords::Center, Keywords::Right>;
-    using XOffset = FlatUnion<XOffsetKeyword, CalcValue<PercentOr<Length>>>;
+    using XOffset = FlatUnion<XOffsetKeyword, Calc<Length>>;
     using YOffsetKeyword = Union<Keywords::Top, Keywords::Center, Keywords::Bottom>;
-    using YOffset = FlatUnion<YOffsetKeyword, CalcValue<PercentOr<Length>>>;
+    using YOffset = FlatUnion<YOffsetKeyword, Calc<Length>>;
 
     XOffset xOffset;
     YOffset yOffset;
@@ -105,7 +105,7 @@ struct ValueParser<TransformOrigin> {
                 });
             },
 
-            [&](CalcValue<PercentOr<Length>> value) -> Res<TransformOrigin> {
+            [&](Calc<Length> value) -> Res<TransformOrigin> {
                 return Ok(TransformOrigin{
                     .xOffset = std::move(value),
                     .yOffset = Keywords::CENTER, // default y-offset
@@ -130,7 +130,7 @@ export using TransformBox = Union<
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix
 export struct MatrixTransform {
-    Array<CalcValue<Number>, 6> values;
+    Array<Calc<Number>, 6> values;
 
     void repr(Io::Emit& e) const {
         e("matrix({}, {}, {}, {}, {}, {})", values[0], values[1], values[2], values[3], values[4], values[5]);
@@ -148,13 +148,13 @@ struct ValueParser<MatrixTransform> {
 
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
-        Array<CalcValue<Number>, 6> values;
+        Array<Calc<Number>, 6> values;
 
         for (usize i = 0; i < 6; ++i) {
             if (content.ended())
                 return Error::invalidData("unexpected end of input");
 
-            auto value = try$(parseValue<CalcValue<Number>>(content));
+            auto value = try$(parseValue<Calc<Number>>(content));
             values[i] = std::move(value);
             if (i < 5)
                 skipOmmitableComma(content);
@@ -167,8 +167,8 @@ struct ValueParser<MatrixTransform> {
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate
 export struct TranslateTransform {
-    CalcValue<PercentOr<Length>> x;
-    CalcValue<PercentOr<Length>> y;
+    Calc<Length> x;
+    Calc<Length> y;
 
     void repr(Io::Emit& e) const {
         e("translate({}, {})", x, y);
@@ -184,7 +184,7 @@ struct ValueParser<TranslateTransform> {
         if (c->prefix == Css::Token::function("translateX(")) {
             Cursor<Css::Sst> content = c->content;
             eatWhitespace(content);
-            auto tx = try$(parseValue<CalcValue<PercentOr<Length>>>(content));
+            auto tx = try$(parseValue<Calc<Length>>(content));
             eatWhitespace(content);
             if (not content.ended()) {
                 return Error::invalidData("unexpected content after translateX function");
@@ -196,7 +196,7 @@ struct ValueParser<TranslateTransform> {
         if (c->prefix == Css::Token::function("translateY(")) {
             Cursor<Css::Sst> content = c->content;
             eatWhitespace(content);
-            auto ty = try$(parseValue<CalcValue<PercentOr<Length>>>(content));
+            auto ty = try$(parseValue<Calc<Length>>(content));
             eatWhitespace(content);
             if (not content.ended())
                 return Error::invalidData("unexpected content after translateY function");
@@ -210,7 +210,7 @@ struct ValueParser<TranslateTransform> {
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
 
-        auto tx = try$(parseValue<CalcValue<PercentOr<Length>>>(content));
+        auto tx = try$(parseValue<Calc<Length>>(content));
         skipOmmitableComma(content);
 
         if (content.ended()) {
@@ -219,7 +219,7 @@ struct ValueParser<TranslateTransform> {
             return Ok(TranslateTransform{std::move(tx), Length{0_au}});
         }
 
-        auto ty = try$(parseValue<CalcValue<PercentOr<Length>>>(content));
+        auto ty = try$(parseValue<Calc<Length>>(content));
         eatWhitespace(content);
         if (not content.ended())
             return Error::invalidData("unexpected content after scale function");
@@ -231,8 +231,8 @@ struct ValueParser<TranslateTransform> {
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale
 export struct ScaleTransform {
-    CalcValue<Number> x;
-    CalcValue<Number> y;
+    Calc<Number> x;
+    Calc<Number> y;
 
     void repr(Io::Emit& e) const {
         e("scale({}, {})", x, y);
@@ -248,7 +248,7 @@ struct ValueParser<ScaleTransform> {
         if (c->prefix == Css::Token::function("scaleX(")) {
             Cursor<Css::Sst> content = c->content;
             eatWhitespace(content);
-            auto sx = try$(parseValue<CalcValue<Number>>(content));
+            auto sx = try$(parseValue<Calc<Number>>(content));
             eatWhitespace(content);
             if (not content.ended()) {
                 return Error::invalidData("unexpected content after scaleX function");
@@ -260,7 +260,7 @@ struct ValueParser<ScaleTransform> {
         if (c->prefix == Css::Token::function("scaleY(")) {
             Cursor<Css::Sst> content = c->content;
             eatWhitespace(content);
-            auto sy = try$(parseValue<CalcValue<Number>>(content));
+            auto sy = try$(parseValue<Calc<Number>>(content));
             eatWhitespace(content);
             if (not content.ended())
                 return Error::invalidData("unexpected content after scaleY function");
@@ -274,7 +274,7 @@ struct ValueParser<ScaleTransform> {
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
 
-        auto x = try$(parseValue<CalcValue<Number>>(content));
+        auto x = try$(parseValue<Calc<Number>>(content));
         skipOmmitableComma(content);
 
         // If the second parameter is not provided, it takes a value equal to the first.
@@ -284,7 +284,7 @@ struct ValueParser<ScaleTransform> {
             return Ok(ScaleTransform{std::move(x), std::move(y)});
         }
 
-        auto y = try$(parseValue<CalcValue<Number>>(content));
+        auto y = try$(parseValue<Calc<Number>>(content));
         eatWhitespace(content);
         if (not content.ended())
             return Error::invalidData("unexpected content after scale function");
@@ -296,7 +296,7 @@ struct ValueParser<ScaleTransform> {
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate
 export struct RotateTransform {
-    CalcValue<Angle> value;
+    Calc<Angle> value;
 
     void repr(Io::Emit& e) const {
         e("rotate({})", value);
@@ -315,7 +315,7 @@ struct ValueParser<RotateTransform> {
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
 
-        auto value = try$(parseValue<CalcValue<Angle>>(content));
+        auto value = try$(parseValue<Calc<Angle>>(content));
         eatWhitespace(content);
 
         if (not content.ended())
@@ -328,8 +328,8 @@ struct ValueParser<RotateTransform> {
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-skew
 export struct SkewTransform {
-    CalcValue<Angle> x;
-    CalcValue<Angle> y;
+    Calc<Angle> x;
+    Calc<Angle> y;
 
     void repr(Io::Emit& e) const {
         e("skew({}, {})", x, y);
@@ -348,7 +348,7 @@ struct ValueParser<SkewTransform> {
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
 
-        auto x = try$(parseValue<CalcValue<Angle>>(content));
+        auto x = try$(parseValue<Calc<Angle>>(content));
         skipOmmitableComma(content);
 
         // If the second parameter is not provided, it has a zero value.
@@ -357,7 +357,7 @@ struct ValueParser<SkewTransform> {
             return Ok(SkewTransform{std::move(x), Angle::fromDegree(0.)});
         }
 
-        auto y = try$(parseValue<CalcValue<Angle>>(content));
+        auto y = try$(parseValue<Calc<Angle>>(content));
         eatWhitespace(content);
 
         if (not content.ended())
@@ -370,7 +370,7 @@ struct ValueParser<SkewTransform> {
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx
 export struct SkewXTransform {
-    CalcValue<Angle> value;
+    Calc<Angle> value;
 
     void repr(Io::Emit& e) const {
         e("skewX({})", value);
@@ -389,7 +389,7 @@ struct ValueParser<SkewXTransform> {
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
 
-        auto value = try$(parseValue<CalcValue<Angle>>(content));
+        auto value = try$(parseValue<Calc<Angle>>(content));
         eatWhitespace(content);
 
         if (not content.ended())
@@ -402,7 +402,7 @@ struct ValueParser<SkewXTransform> {
 
 // https://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewy
 export struct SkewYTransform {
-    CalcValue<Angle> value;
+    Calc<Angle> value;
 
     void repr(Io::Emit& e) const {
         e("skewY({})", value);
@@ -421,7 +421,7 @@ struct ValueParser<SkewYTransform> {
         Cursor<Css::Sst> content = c->content;
         eatWhitespace(content);
 
-        auto value = try$(parseValue<CalcValue<Angle>>(content));
+        auto value = try$(parseValue<Calc<Angle>>(content));
         eatWhitespace(content);
 
         if (not content.ended())
diff --git a/src/vaev-engine/values/width.cpp b/src/vaev-engine/values/width.cpp
index 09408825..5bf60983 100644
--- a/src/vaev-engine/values/width.cpp
+++ b/src/vaev-engine/values/width.cpp
@@ -13,6 +13,6 @@ namespace Vaev {
 
 export using Width = FlatUnion<
     Keywords::Auto,
-    CalcValue<PercentOr<Length>>>;
+    Calc<Length>>;
 
 } // namespace Vaev