CSS 宣言を貼り付け、書字方向と向きを選ぶと、フロー相対の等価な宣言が 1 行ずつ表示されます。変換されない宣言はそのまま残り、カウンターに数えられます。
ブラウザ内でローカルに実行このツールは CSS 宣言の一覧を読み取り、選んだ書字方向で表現できる物理プロパティを論理プロパティに書き換えます。対応する辺・サイズ・配置はすべてフロー相対の値になり、パネルには「CSS をコピー」がクリップボードに入れる内容がそのまま表示されます。
処理はすべてページ内で完結します。宣言はページが読み込むバンドル自身が解析し、入力した CSS が外部へ送信されることはなく、ネットワークが切れても動作します。値は一切書き換えません。変換するのはプロパティ名（text-align と float ではキーワード）だけなので、calc() や色、相対単位はそのまま出力されます。
辺は書字方向と向きで解決されます。horizontal-tb と ltr では、margin-left は margin-inline-start、padding-top は padding-block-start、border-right-width は border-inline-end-width になります。向きを rtl に変えると margin-left は margin-inline-end です。vertical-rl（縦書き）では margin-left が margin-block-end、padding-top が padding-inline-start になります。同じ対応表が margin、padding、border の 3 要素（width・style・color）と位置指定の top / right / bottom / left を扱い、それぞれ inset-block-start、inset-inline-end などになります。text-align: left は ltr で start、rtl で end に書き換わり、float: right は ltr で inline-end、rtl で inline-start になります。
サイズも同じ考え方です。width / min-width / max-width は横書きでは inline-size / min-inline-size / max-inline-size、縦書きでは block-size / min-block-size / max-block-size になり、height 系はもう一方の軸へ移ります。値は末尾の !important を含めて 1 文字も変えずにコピーするため、margin-left: 10px !important は margin-inline-start: 10px !important になります。
ショートハンドは分割しません。margin、padding、border、border-left、inset は書かれたまま残ります。安全に分割するにはカスケード全体が必要だからです。すでに論理プロパティのもの（margin-inline-start、block-size）、--tokens のようなカスタムプロパティ、アットルール、セレクター、ルールブロックの波かっこは変更せずに返し、「変換されていない」として数えます。削除されるものはありません。/* … */ のコメントは除去し、値のない宣言（margin-left:）はそのまま残します。
セミコロンが値の一部である場合も正しく扱います。background-image: url(data:image/svg+xml;base64,…) はそのまま残り、content: "a;b" も同様です。text-align: justify / start / end、色、calc() 式、あらゆる単位は変更されません。編集するのはプロパティ名（および 2 つのキーワード）だけなので、出力はそのままスタイルシートに貼り付けられます。ただし貼り付けたブロックのインデントは保持されず、出力は 1 行 1 宣言になります。
カウンターは現在の実行内容を表します。「6 converted declarations」は 6 つの物理プロパティを書き換えたという意味で、2 つ目の数字はショートハンド、すでに論理的なプロパティ、アットルールなど、そのまま通した部分の数です。入力が空のときはカウンターを表示しません。フォールバックをオンにすると、変換された規則は物理行・論理行の順に 2 行で出力され、論理プロパティに対応していないブラウザーでも表示が保たれます。
ステージは模式図であり、入力した CSS の描画ではありません。4 つの論理軸と、セレクターに合わせて writing-mode と direction が変わるカードを表示します。論理キーワードがどの物理的な辺を指すかを貼り付け前に確認するために使い、実際の要素ではブラウザーのインスペクターで結果を確認してください。flex や grid コンテナの継承された制約が値の効果を変えることがあります。