From 284b46fee7ad682b52c99d0455a1134e1d4e3fc3 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 17 Nov 2025 10:44:55 +0100
Subject: [PATCH] Implement CSS theme tokens behind feature flag (#36861)

---
 .prettierignore                               |     1 +
 app/helpers/theme_helper.rb                   |    10 +-
 app/javascript/mastodon/components/status.jsx |     1 -
 .../components/status/boost_button.tsx        |     2 +
 .../components/status_action_bar/index.jsx    |    12 +-
 .../features/about/components/rules.tsx       |    24 +-
 .../components/follow_request_note.jsx        |     4 +-
 .../compose/components/text_icon_button.jsx   |    38 -
 .../mastodon/features/compose/index.tsx       |     2 +-
 .../components/disabled_account_banner.tsx    |     2 +-
 .../components/sign_in_banner.tsx             |     4 +-
 .../ui/components/bundle_column_error.jsx     |     2 +-
 .../ui/components/modal_placeholder.tsx       |     2 +-
 .../features/ui/components/navigation_bar.tsx |     4 +-
 app/javascript/styles/mastodon/admin.scss     |     4 -
 app/javascript/styles_new/application.scss    |     7 +
 app/javascript/styles_new/common.scss         |    24 +
 app/javascript/styles_new/contrast.scss       |     8 +
 app/javascript/styles_new/contrast/diff.scss  |    54 +
 .../styles_new/entrypoints/inert.scss         |    14 +
 .../styles_new/entrypoints/mailer.scss        |  1030 ++
 app/javascript/styles_new/fonts/inter.scss    |     8 +
 .../styles_new/fonts/roboto-mono.scss         |    13 +
 app/javascript/styles_new/fonts/roboto.scss   |    55 +
 app/javascript/styles_new/mastodon-light.scss |     9 +
 .../mastodon-light/css_variables.scss         |   214 +
 .../styles_new/mastodon/_mixins.scss          |    45 +
 .../styles_new/mastodon/_theme_utils.scss     |     3 +
 .../styles_new/mastodon/_variables.scss       |    27 +
 app/javascript/styles_new/mastodon/about.scss |   130 +
 .../styles_new/mastodon/accessibility.scss    |    13 +
 .../styles_new/mastodon/accounts.scss         |   411 +
 app/javascript/styles_new/mastodon/admin.scss |  2173 +++
 .../styles_new/mastodon/annual_reports.scss   |   342 +
 .../styles_new/mastodon/basics.scss           |   300 +
 .../styles_new/mastodon/branding.scss         |     5 +
 .../styles_new/mastodon/components.scss       | 11433 ++++++++++++++++
 .../styles_new/mastodon/containers.scss       |   166 +
 .../styles_new/mastodon/css_variables.scss    |   228 +
 .../styles_new/mastodon/dashboard.scss        |   120 +
 .../styles_new/mastodon/emoji_picker.scss     |   248 +
 app/javascript/styles_new/mastodon/forms.scss |  1449 ++
 app/javascript/styles_new/mastodon/lists.scss |    19 +
 app/javascript/styles_new/mastodon/modal.scss |    53 +
 app/javascript/styles_new/mastodon/polls.scss |   232 +
 app/javascript/styles_new/mastodon/reset.scss |    58 +
 .../styles_new/mastodon/rich_text.scss        |   116 +
 app/javascript/styles_new/mastodon/rtl.scss   |    50 +
 .../styles_new/mastodon/tables.scss           |   375 +
 .../styles_new/mastodon/widgets.scss          |   183 +
 .../confirm_suspension.html.haml              |     2 +-
 .../admin/reports/actions/preview.html.haml   |     2 +-
 app/views/admin/roles/_role.html.haml         |    13 +-
 app/views/auth/registrations/rules.html.haml  |     2 +-
 app/views/layouts/modal.html.haml             |     2 +-
 app/views/settings/imports/show.html.haml     |     2 +-
 config/vite/plugin-mastodon-themes.ts         |    24 +-
 stylelint.config.js                           |     3 +-
 58 files changed, 19690 insertions(+), 87 deletions(-)
 delete mode 100644 app/javascript/mastodon/features/compose/components/text_icon_button.jsx
 create mode 100644 app/javascript/styles_new/application.scss
 create mode 100644 app/javascript/styles_new/common.scss
 create mode 100644 app/javascript/styles_new/contrast.scss
 create mode 100644 app/javascript/styles_new/contrast/diff.scss
 create mode 100644 app/javascript/styles_new/entrypoints/inert.scss
 create mode 100644 app/javascript/styles_new/entrypoints/mailer.scss
 create mode 100644 app/javascript/styles_new/fonts/inter.scss
 create mode 100644 app/javascript/styles_new/fonts/roboto-mono.scss
 create mode 100644 app/javascript/styles_new/fonts/roboto.scss
 create mode 100644 app/javascript/styles_new/mastodon-light.scss
 create mode 100644 app/javascript/styles_new/mastodon-light/css_variables.scss
 create mode 100644 app/javascript/styles_new/mastodon/_mixins.scss
 create mode 100644 app/javascript/styles_new/mastodon/_theme_utils.scss
 create mode 100644 app/javascript/styles_new/mastodon/_variables.scss
 create mode 100644 app/javascript/styles_new/mastodon/about.scss
 create mode 100644 app/javascript/styles_new/mastodon/accessibility.scss
 create mode 100644 app/javascript/styles_new/mastodon/accounts.scss
 create mode 100644 app/javascript/styles_new/mastodon/admin.scss
 create mode 100644 app/javascript/styles_new/mastodon/annual_reports.scss
 create mode 100644 app/javascript/styles_new/mastodon/basics.scss
 create mode 100644 app/javascript/styles_new/mastodon/branding.scss
 create mode 100644 app/javascript/styles_new/mastodon/components.scss
 create mode 100644 app/javascript/styles_new/mastodon/containers.scss
 create mode 100644 app/javascript/styles_new/mastodon/css_variables.scss
 create mode 100644 app/javascript/styles_new/mastodon/dashboard.scss
 create mode 100644 app/javascript/styles_new/mastodon/emoji_picker.scss
 create mode 100644 app/javascript/styles_new/mastodon/forms.scss
 create mode 100644 app/javascript/styles_new/mastodon/lists.scss
 create mode 100644 app/javascript/styles_new/mastodon/modal.scss
 create mode 100644 app/javascript/styles_new/mastodon/polls.scss
 create mode 100644 app/javascript/styles_new/mastodon/reset.scss
 create mode 100644 app/javascript/styles_new/mastodon/rich_text.scss
 create mode 100644 app/javascript/styles_new/mastodon/rtl.scss
 create mode 100644 app/javascript/styles_new/mastodon/tables.scss
 create mode 100644 app/javascript/styles_new/mastodon/widgets.scss

diff --git a/.prettierignore b/.prettierignore
index 098dac67177..bd382506695 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -68,6 +68,7 @@ docker-compose.override.yml
 
 # Ignore vendored CSS reset
 app/javascript/styles/mastodon/reset.scss
+app/javascript/styles_new/mastodon/reset.scss
 
 # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
 *.js
diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 00b4a6d2b3f..32734b93af9 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -4,11 +4,11 @@ module ThemeHelper
   def theme_style_tags(theme)
     if theme == 'system'
       ''.html_safe.tap do |tags|
-        tags << vite_stylesheet_tag('themes/mastodon-light', type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
-        tags << vite_stylesheet_tag('themes/default', type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+        tags << vite_stylesheet_tag(theme_path_for('mastodon-light'), type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
+        tags << vite_stylesheet_tag(theme_path_for('default'), type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
       end
     else
-      vite_stylesheet_tag "themes/#{theme}", type: :virtual, media: 'all', crossorigin: 'anonymous'
+      vite_stylesheet_tag theme_path_for(theme), type: :virtual, media: 'all', crossorigin: 'anonymous'
     end
   end
 
@@ -53,4 +53,8 @@ module ThemeHelper
   def theme_color_for(theme)
     theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark]
   end
+
+  def theme_path_for(theme)
+    Mastodon::Feature.theme_tokens_enabled? ? "themes/#{theme}_theme_tokens" : "themes/#{theme}"
+  end
 end
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index 2a8c9bfb2d8..1e746e5f710 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -553,7 +553,6 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-
     return (
       <Hotkeys handlers={handlers} focusable={!unfocusable}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
diff --git a/app/javascript/mastodon/components/status/boost_button.tsx b/app/javascript/mastodon/components/status/boost_button.tsx
index 7d5939de6d3..023ba8ff195 100644
--- a/app/javascript/mastodon/components/status/boost_button.tsx
+++ b/app/javascript/mastodon/components/status/boost_button.tsx
@@ -64,6 +64,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
       title={intl.formatMessage(meta ?? title)}
       icon='retweet'
       iconComponent={iconComponent}
+      className='status__action-bar__button'
       onClick={!disabled ? handleClick : undefined}
       counter={
         counters
@@ -195,6 +196,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
           isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
         )}
         icon='retweet'
+        className='status__action-bar__button'
         iconComponent={boostIcon}
         counter={
           counters
diff --git a/app/javascript/mastodon/components/status_action_bar/index.jsx b/app/javascript/mastodon/components/status_action_bar/index.jsx
index ba184f57544..5c79970e23f 100644
--- a/app/javascript/mastodon/components/status_action_bar/index.jsx
+++ b/app/javascript/mastodon/components/status_action_bar/index.jsx
@@ -406,15 +406,19 @@ class StatusActionBar extends ImmutablePureComponent {
               status={status}
               needsStatusRefresh={quickBoosting && status.get('quote_approval') === null}
               items={menu}
-              icon='ellipsis-h'
-              iconComponent={MoreHorizIcon}
               direction='right'
-              title={intl.formatMessage(messages.more)}
               onOpen={() => {
                 dismissQuoteHint();
                 return true;
               }}
-            />
+            >
+              <IconButton
+                className='status__action-bar__button'
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                title={intl.formatMessage(messages.more)}
+              />
+            </Dropdown>
           )}
         </RemoveQuoteHint>
       </div>
diff --git a/app/javascript/mastodon/features/about/components/rules.tsx b/app/javascript/mastodon/features/about/components/rules.tsx
index 07ca1039602..1b1e28a7ff2 100644
--- a/app/javascript/mastodon/features/about/components/rules.tsx
+++ b/app/javascript/mastodon/features/about/components/rules.tsx
@@ -104,17 +104,19 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
               defaultMessage='Language'
             />
           </label>
-          <select onChange={handleLocaleChange} id='language-select'>
-            {localeOptions.map((option) => (
-              <option
-                key={option.value}
-                value={option.value}
-                selected={option.value === selectedLocale}
-              >
-                {option.text}
-              </option>
-            ))}
-          </select>
+          <div className='select-wrapper'>
+            <select onChange={handleLocaleChange} id='language-select'>
+              {localeOptions.map((option) => (
+                <option
+                  key={option.value}
+                  value={option.value}
+                  selected={option.value === selectedLocale}
+                >
+                  {option.text}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
       )}
     </Section>
diff --git a/app/javascript/mastodon/features/account/components/follow_request_note.jsx b/app/javascript/mastodon/features/account/components/follow_request_note.jsx
index 9c20f1e0626..27ebb8fd64b 100644
--- a/app/javascript/mastodon/features/account/components/follow_request_note.jsx
+++ b/app/javascript/mastodon/features/account/components/follow_request_note.jsx
@@ -24,12 +24,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
         </div>
 
         <div className='follow-request-banner__action'>
-          <button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
+          <button type='button' className='button button-secondary button--confirmation' onClick={onAuthorize}>
             <Icon id='check' icon={CheckIcon} />
             <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
           </button>
 
-          <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
+          <button type='button' className='button button-secondary button--destructive' onClick={onReject}>
             <Icon id='times' icon={CloseIcon} />
             <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
           </button>
diff --git a/app/javascript/mastodon/features/compose/components/text_icon_button.jsx b/app/javascript/mastodon/features/compose/components/text_icon_button.jsx
deleted file mode 100644
index 166d022b88a..00000000000
--- a/app/javascript/mastodon/features/compose/components/text_icon_button.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-const iconStyle = {
-  height: null,
-  lineHeight: '27px',
-  minWidth: `${18 * 1.28571429}px`,
-};
-
-export default class TextIconButton extends PureComponent {
-
-  static propTypes = {
-    label: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    ariaControls: PropTypes.string,
-  };
-
-  render () {
-    const { label, title, active, ariaControls } = this.props;
-
-    return (
-      <button
-        type='button'
-        title={title}
-        aria-label={title}
-        className={`text-icon-button ${active ? 'active' : ''}`}
-        aria-expanded={active}
-        onClick={this.props.onClick}
-        aria-controls={ariaControls} style={iconStyle}
-      >
-        {label}
-      </button>
-    );
-  }
-
-}
diff --git a/app/javascript/mastodon/features/compose/index.tsx b/app/javascript/mastodon/features/compose/index.tsx
index 892cbb97617..527e541e84d 100644
--- a/app/javascript/mastodon/features/compose/index.tsx
+++ b/app/javascript/mastodon/features/compose/index.tsx
@@ -166,7 +166,7 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
           <div className='drawer__inner'>
             <ComposeFormContainer />
 
-            <div className='drawer__inner__mastodon'>
+            <div className='drawer__inner__mastodon with-zig-zag-decoration'>
               <img alt='' draggable='false' src={mascot ?? elephantUIPlane} />
             </div>
           </div>
diff --git a/app/javascript/mastodon/features/navigation_panel/components/disabled_account_banner.tsx b/app/javascript/mastodon/features/navigation_panel/components/disabled_account_banner.tsx
index 9103170fa75..6cb450d1d61 100644
--- a/app/javascript/mastodon/features/navigation_panel/components/disabled_account_banner.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/components/disabled_account_banner.tsx
@@ -75,7 +75,7 @@ export const DisabledAccountBanner: React.FC = () => {
       </a>
       <button
         type='button'
-        className='button button--block button-tertiary'
+        className='button button--block button-secondary'
         onClick={handleLogOutClick}
       >
         <FormattedMessage
diff --git a/app/javascript/mastodon/features/navigation_panel/components/sign_in_banner.tsx b/app/javascript/mastodon/features/navigation_panel/components/sign_in_banner.tsx
index 470b806cbc5..ebcb532bb44 100644
--- a/app/javascript/mastodon/features/navigation_panel/components/sign_in_banner.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/components/sign_in_banner.tsx
@@ -46,7 +46,7 @@ export const SignInBanner: React.FC = () => {
         <a
           href={sso_redirect}
           data-method='post'
-          className='button button--block button-tertiary'
+          className='button button--block button-secondary'
         >
           <FormattedMessage
             id='sign_in_banner.sso_redirect'
@@ -98,7 +98,7 @@ export const SignInBanner: React.FC = () => {
         />
       </p>
       {signupButton}
-      <a href='/auth/sign_in' className='button button--block button-tertiary'>
+      <a href='/auth/sign_in' className='button button--block button-secondary'>
         <FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' />
       </a>
     </div>
diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error.jsx b/app/javascript/mastodon/features/ui/components/bundle_column_error.jsx
index beaf1856382..2461028d8be 100644
--- a/app/javascript/mastodon/features/ui/components/bundle_column_error.jsx
+++ b/app/javascript/mastodon/features/ui/components/bundle_column_error.jsx
@@ -98,7 +98,7 @@ class BundleColumnError extends PureComponent {
             <div className='error-column__message__actions'>
               {errorType === 'network' && <Button onClick={this.handleRetry}><FormattedMessage id='bundle_column_error.retry' defaultMessage='Try again' /></Button>}
               {errorType === 'error' && <CopyButton value={stacktrace}><FormattedMessage id='bundle_column_error.copy_stacktrace' defaultMessage='Copy error report' /></CopyButton>}
-              <Link to='/' className={classNames('button', { 'button-tertiary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
+              <Link to='/' className={classNames('button', { 'button-secondary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
             </div>
           </div>
         </div>
diff --git a/app/javascript/mastodon/features/ui/components/modal_placeholder.tsx b/app/javascript/mastodon/features/ui/components/modal_placeholder.tsx
index 13ec6ca2c82..9901ab6492b 100644
--- a/app/javascript/mastodon/features/ui/components/modal_placeholder.tsx
+++ b/app/javascript/mastodon/features/ui/components/modal_placeholder.tsx
@@ -46,7 +46,7 @@ export const ModalPlaceholder: React.FC<{
                   defaultMessage='Try again'
                 />
               </Button>
-              <Button onClick={handleClose} className='button button-tertiary'>
+              <Button onClick={handleClose} className='button button-secondary'>
                 <FormattedMessage
                   id='bundle_modal_error.close'
                   defaultMessage='Close'
diff --git a/app/javascript/mastodon/features/ui/components/navigation_bar.tsx b/app/javascript/mastodon/features/ui/components/navigation_bar.tsx
index a542bd1f680..def1835c3e0 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_bar.tsx
+++ b/app/javascript/mastodon/features/ui/components/navigation_bar.tsx
@@ -104,7 +104,7 @@ const LoginOrSignUp: React.FC = () => {
         <a
           href={sso_redirect}
           data-method='post'
-          className='button button--block button-tertiary'
+          className='button button--block button-secondary'
         >
           <FormattedMessage
             id='sign_in_banner.sso_redirect'
@@ -143,7 +143,7 @@ const LoginOrSignUp: React.FC = () => {
     return (
       <div className='ui__navigation-bar__sign-up'>
         {signupButton}
-        <a href='/auth/sign_in' className='button button-tertiary'>
+        <a href='/auth/sign_in' className='button button-secondary'>
           <FormattedMessage
             id='sign_in_banner.sign_in'
             defaultMessage='Login'
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index b5cb56d4254..c8a794c7edc 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1024,10 +1024,6 @@ a.name-tag,
   margin-top: 15px;
 }
 
-.user-role {
-  color: var(--user-role-accent);
-}
-
 .applications-list {
   .icon {
     vertical-align: middle;
diff --git a/app/javascript/styles_new/application.scss b/app/javascript/styles_new/application.scss
new file mode 100644
index 00000000000..e16e5368e7d
--- /dev/null
+++ b/app/javascript/styles_new/application.scss
@@ -0,0 +1,7 @@
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
+
+html {
+  color-scheme: dark;
+}
diff --git a/app/javascript/styles_new/common.scss b/app/javascript/styles_new/common.scss
new file mode 100644
index 00000000000..d8a7f90a327
--- /dev/null
+++ b/app/javascript/styles_new/common.scss
@@ -0,0 +1,24 @@
+@use 'mastodon/mixins';
+@use 'fonts/roboto';
+@use 'fonts/roboto-mono';
+
+@use 'mastodon/reset';
+@use 'mastodon/basics';
+@use 'mastodon/branding';
+@use 'mastodon/containers';
+@use 'mastodon/lists';
+@use 'mastodon/widgets';
+@use 'mastodon/forms';
+@use 'mastodon/accounts';
+@use 'mastodon/components';
+@use 'mastodon/polls';
+@use 'mastodon/modal';
+@use 'mastodon/emoji_picker';
+@use 'mastodon/annual_reports';
+@use 'mastodon/about';
+@use 'mastodon/tables';
+@use 'mastodon/admin';
+@use 'mastodon/dashboard';
+@use 'mastodon/rtl';
+@use 'mastodon/accessibility';
+@use 'mastodon/rich_text';
diff --git a/app/javascript/styles_new/contrast.scss b/app/javascript/styles_new/contrast.scss
new file mode 100644
index 00000000000..af73c88fef6
--- /dev/null
+++ b/app/javascript/styles_new/contrast.scss
@@ -0,0 +1,8 @@
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
+@use 'contrast/diff';
+
+html {
+  color-scheme: dark;
+}
diff --git a/app/javascript/styles_new/contrast/diff.scss b/app/javascript/styles_new/contrast/diff.scss
new file mode 100644
index 00000000000..f809c7cdc3a
--- /dev/null
+++ b/app/javascript/styles_new/contrast/diff.scss
@@ -0,0 +1,54 @@
+:root {
+  /* TEXT TOKENS */
+
+  --color-text-primary: var(--color-grey-50);
+  --color-text-secondary: var(--color-grey-300);
+  --color-text-tertiary: var(--color-grey-400);
+  --color-text-brand: var(--color-indigo-300);
+  --color-text-status-links: var(--color-text-brand);
+
+  /* BORDER TOKENS */
+
+  --border-strength-primary: 18%;
+}
+
+.status__content a,
+.reply-indicator__content a,
+.edit-indicator__content a,
+.link-footer a,
+.status__content__read-more-button,
+.status__content__translate-button {
+  text-decoration: underline;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+
+  &.mention {
+    text-decoration: none;
+
+    span {
+      text-decoration: underline;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      span {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.link-button:disabled {
+  cursor: not-allowed;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none !important;
+  }
+}
diff --git a/app/javascript/styles_new/entrypoints/inert.scss b/app/javascript/styles_new/entrypoints/inert.scss
new file mode 100644
index 00000000000..a60045d7be8
--- /dev/null
+++ b/app/javascript/styles_new/entrypoints/inert.scss
@@ -0,0 +1,14 @@
+/* This is needed for the wicg-inert polyfill */
+
+[inert] {
+  pointer-events: none;
+  cursor: default;
+}
+
+[inert],
+[inert] * {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
diff --git a/app/javascript/styles_new/entrypoints/mailer.scss b/app/javascript/styles_new/entrypoints/mailer.scss
new file mode 100644
index 00000000000..fcbbd66f4c7
--- /dev/null
+++ b/app/javascript/styles_new/entrypoints/mailer.scss
@@ -0,0 +1,1030 @@
+@use '../fonts/inter';
+
+body {
+  accent-color: #6364ff;
+  overflow-wrap: anywhere;
+  margin: 0;
+  background-color: #f3f2f5;
+  padding: 0;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  font-family: Inter, 'Lucida Grande', sans-serif;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border: none;
+  text-indent: 0;
+  vertical-align: middle;
+  color: inherit;
+  font-family: inherit;
+}
+
+table {
+  border: none;
+}
+
+table + p {
+  margin-top: 16px;
+}
+
+.email {
+  min-width: 280px;
+  font-family: Inter, 'Lucida Grande', sans-serif;
+  overflow-wrap: anywhere;
+  color: #17063b;
+  background-color: #f3f2f5;
+}
+
+.email-container {
+  max-width: 740px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// Outer email card
+.email-card-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.email-card-td {
+  overflow: hidden;
+  box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 4%);
+  background-color: #fff;
+}
+
+// Inner email card
+.email-inner-card-table {
+  border-collapse: separate;
+  width: 100%;
+  border-radius: 12px;
+}
+
+.email-inner-card-td-without-padding,
+.email-inner-card-td {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 8%);
+  background-color: #fff;
+  border: 1px solid #dfdee3;
+}
+
+.email-inner-card-td {
+  padding: 24px;
+}
+
+.email-inner-nested-card-td {
+  border-radius: 12px;
+  padding: 18px;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #dfdee3;
+}
+
+// Account
+.email-account-banner-table {
+  background-color: #f3f2f5;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.email-account-banner-td {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  height: 140px;
+  vertical-align: bottom;
+  background-position: center !important;
+  background-size: cover !important;
+}
+
+.email-account-banner-inner-td {
+  padding: 24px 24px 0;
+  mso-padding-alt: 24px;
+}
+
+.email-account-banner-overlap-div {
+  max-height: 42px;
+}
+
+.email-account-banner-icon-table {
+  width: auto;
+  margin: 0;
+  overflow: hidden;
+  border-radius: 8px;
+  border-collapse: separate;
+  background-color: #fff;
+  border: 2px solid #fff;
+
+  img {
+    display: block;
+    max-width: 100%;
+    border: none;
+    border-radius: 6px;
+  }
+}
+
+.email-account-body-td {
+  padding: 56px 24px 24px;
+  mso-padding-alt: 24px;
+}
+
+.email-account-name {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #17063b;
+}
+
+.email-account-handle {
+  font-size: 14px;
+  line-height: 20px;
+  color: #746a89;
+}
+
+.email-account-stats-table {
+  td {
+    padding-right: 16px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #746a89;
+  }
+
+  b {
+    font-weight: 600;
+    color: #17063b;
+  }
+
+  span {
+    white-space: nowrap;
+  }
+}
+
+// Utility classes
+.email-w-full {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.email-prose {
+  p,
+  ul,
+  ol {
+    color: #17063b;
+    font-size: 14px;
+    line-height: 20px;
+
+    &:not(:last-child) {
+      margin-bottom: 16px;
+    }
+
+    a:not([class]) {
+      color: #6364ff;
+      text-decoration: none;
+
+      &:hover {
+        color: #563acc !important;
+      }
+    }
+  }
+}
+
+.email-dir-rtl {
+  direction: rtl;
+
+  [dir='rtl'] & {
+    direction: ltr;
+  }
+}
+
+.email-dir-ltr {
+  direction: ltr;
+}
+
+.email-padding-24 {
+  padding: 24px;
+}
+
+.email-padding-top-24 {
+  padding-top: 24px;
+}
+
+.email-padding-top-16 {
+  padding-top: 16px;
+}
+
+.email-padding-top-0 {
+  padding-top: 0;
+}
+
+.email-border-top {
+  border-top: 1px solid #dfdee3;
+}
+
+.email-border-bottom {
+  border-bottom: 1px solid #dfdee3;
+}
+
+.email-desktop-flex {
+  font-size: 0;
+  max-width: 740px;
+  margin-left: auto;
+  margin-right: auto;
+
+  &.email-dir-rtl > .email-desktop-column {
+    direction: ltr;
+
+    [dir='rtl'] & {
+      direction: rtl;
+    }
+  }
+}
+
+.email-desktop-column {
+  display: inline-block;
+  width: 100%;
+  max-width: none;
+  text-align: start;
+  vertical-align: top;
+  font-size: 16px;
+}
+
+// Header
+.email-header-td {
+  padding: 16px 32px;
+  background-color: #1b001f;
+  background-image: url('../../images/mailer-new/common/header-bg-start.png');
+  background-position: left top;
+  background-repeat: repeat;
+}
+
+.email-header-logo-table {
+  width: auto;
+  margin: 0;
+}
+
+.email-header-logo-td {
+  padding: 16px 0;
+  font-size: 0;
+
+  img {
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    max-height: 40px;
+  }
+}
+
+.email-header-logo-a {
+  display: inline-block;
+
+  img {
+    display: inline-block;
+    color: #fff;
+  }
+}
+
+.email-header-logo-div {
+  max-height: 0;
+}
+
+.email-header-logo-p {
+  word-break: break-all;
+  padding-left: 40px;
+  padding-top: 26px;
+  font-size: 11px;
+  line-height: 13px;
+  color: #8d808f;
+  text-align: left;
+}
+
+.email-header-logo-span {
+  display: block;
+  text-align: right;
+}
+
+.email-header-heading-td {
+  padding: 16px 0;
+}
+
+.email-header-heading-img-td {
+  width: 56px;
+  text-align: left;
+  vertical-align: top;
+
+  img {
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+  }
+}
+
+.email-header-heading-txt-td {
+  vertical-align: middle;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  h1 {
+    margin-bottom: 5px;
+    color: #fff;
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 600;
+  }
+
+  p {
+    color: #a399a5;
+    font-size: 18px;
+    line-height: 21.6px;
+    font-weight: 500;
+  }
+
+  &:only-child {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.email-header-card-table {
+  width: 100%;
+  border-collapse: separate;
+  overflow: hidden;
+  border-radius: 12px;
+  background-color: #fff;
+  border: 2px solid #fff;
+  box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 8%);
+}
+
+.email-header-card {
+  position: relative;
+  max-height: 100px;
+}
+
+.email-header-card-banner-td {
+  border-radius: 12px 12px 0 0;
+  width: 236px;
+  height: 80px;
+  background-color: #f3f2f5 !important;
+  background-position: center !important;
+  background-size: cover !important;
+}
+
+.email-header-card-body-td {
+  padding: 12px;
+
+  .email-btn-table {
+    width: 100%;
+    max-width: 212px;
+  }
+}
+
+.email-header-card-instance {
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  color: #17063b;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+
+  &:only-of-type {
+    margin-bottom: 12px;
+  }
+}
+
+.email-header-card-description {
+  margin-bottom: 12px;
+  color: #746a89;
+  font-size: 12px;
+  line-height: 16px;
+  max-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+// To make the design work with images off
+// we create an empty div that overlaps with
+// the rest of the content with a dark background.
+.email-header-after-div {
+  max-height: 0;
+}
+
+.email-header-after-inside-div {
+  height: 30px;
+  background-color: #1b001f;
+}
+
+// Body content
+.email-body-td {
+  background-image: url('../../images/mailer-new/common/header-bg-end.png');
+  background-position: left top;
+  background-repeat: no-repeat;
+}
+
+.email-body-padding-td {
+  padding: 0 32px 32px;
+  mso-padding-alt: 32px;
+}
+
+.email-body-columns-td {
+  border-top: 1px solid #dfdee3;
+  padding: 32px 24px 8px;
+}
+
+.email-body-huge-padding-td {
+  padding: 110px 32px 32px;
+  mso-padding-alt: 32px;
+}
+
+.email-body-padding-td {
+  & > p {
+    font-size: 14px;
+    line-height: 20px;
+    color: #17063b;
+
+    a {
+      color: #6364ff;
+      text-decoration: none;
+
+      &:hover {
+        color: #563acc !important;
+      }
+    }
+  }
+}
+
+// Texts
+.email-h2 {
+  margin-bottom: 4px;
+  color: #17063b;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.email-h-sub {
+  margin-bottom: 16px;
+  color: #746a89;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.email-p {
+  margin-bottom: 16px;
+  color: #746a89;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+// Footer
+.email-footer-td {
+  padding: 28px 32px 32px;
+  text-align: center;
+}
+
+.email-footer-logo-a {
+  display: inline-block;
+}
+
+.email-footer-p {
+  color: #9b94ab;
+  text-align: center;
+  font-size: 12px;
+  line-height: 20px;
+
+  a {
+    color: #9b94ab;
+    text-decoration: underline;
+  }
+
+  &:first-child {
+    margin-bottom: 12px;
+  }
+}
+
+// Button
+.email-btn-table {
+  margin: 0;
+  max-width: 100%;
+  border-collapse: separate;
+  border-radius: 8px;
+  background-color: #6364ff;
+}
+
+.email-btn-td {
+  height: 40px;
+  text-align: center;
+  mso-padding-alt: 0 35px;
+  word-break: normal;
+}
+
+.email-btn-a {
+  display: block;
+  border-radius: 8px;
+  padding-left: 35px;
+  padding-right: 35px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+  font-family: Inter, 'Lucida Grande', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #fff;
+  text-decoration: none;
+  transition: background-color 0.3s ease-in-out;
+}
+
+// Status
+.email-status-header-img {
+  vertical-align: top;
+  width: 48px;
+
+  img {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+
+.email-quote-header-img {
+  width: 34px;
+
+  img {
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+
+.email-status-header-text {
+  padding-left: 16px;
+  padding-right: 16px;
+  vertical-align: middle;
+}
+
+.email-quote-header-text {
+  padding-left: 14px;
+  padding-right: 14px;
+  vertical-align: middle;
+}
+
+.email-status-header-name {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #17063b;
+}
+
+.email-status-header-handle {
+  font-size: 14px;
+  line-height: 20px;
+  color: #746a89;
+}
+
+.email-quote-header-name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #17063b;
+}
+
+.email-quote-header-handle {
+  font-size: 13px;
+  line-height: 18px;
+  color: #746a89;
+}
+
+.email-status-content {
+  padding-top: 24px;
+}
+
+.email-status-spoiler {
+  color: #746a89;
+  font-style: italic;
+  margin-bottom: 8px;
+}
+
+.email-status-prose {
+  .quote-inline {
+    display: none;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 20px;
+    color: #17063b;
+    white-space: pre-wrap;
+    unicode-bidi: plaintext;
+  }
+
+  a {
+    color: #6364ff;
+    text-decoration: none;
+
+    &:hover {
+      color: #563acc !important;
+    }
+  }
+
+  .invisible {
+    font-size: 0;
+    line-height: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  .ellipsis {
+    &::after {
+      content: '…';
+    }
+  }
+}
+
+.email-status-media {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #17063b;
+
+  img {
+    border-radius: 8px;
+  }
+
+  a {
+    color: #6364ff;
+    text-decoration: none;
+
+    &:hover {
+      color: #563acc !important;
+    }
+  }
+}
+
+.email-status-footer {
+  margin-top: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #746a89;
+
+  a {
+    color: #746a89;
+  }
+
+  a:hover {
+    color: #746a89 !important;
+    text-decoration: underline !important;
+  }
+}
+
+// Purple frame for emphasis
+.email-frame-table {
+  background-color: #efefff;
+  border-radius: 8px;
+}
+
+.email-frame-td {
+  padding: 16px;
+}
+
+.email-frame-wrapper-td {
+  padding-bottom: 16px;
+}
+
+.email-frame-td > p {
+  text-align: center;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+// Checklist item
+.email-checklist-wrapper-td {
+  padding: 4px 0;
+}
+
+.email-checklist-table {
+  border-radius: 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #efefff;
+  background-color: #fff;
+}
+
+.email-checklist-checked {
+  border-color: #c4e6d7;
+  background-color: #eaf6f1;
+}
+
+.email-checklist-td {
+  padding: 16px 16px 6px;
+}
+
+.email-checklist-icons-td {
+  width: 84px;
+  vertical-align: top;
+}
+
+.email-checklist-icons-checkbox-td {
+  width: 20px;
+  vertical-align: middle;
+
+  img {
+    max-width: 100%;
+    width: 20px;
+  }
+}
+
+.email-checklist-icons-step-td {
+  width: 64px;
+  text-align: center;
+  vertical-align: middle;
+
+  img {
+    max-width: 100%;
+    width: 40px;
+  }
+}
+
+.email-checklist-text-td {
+  h3 {
+    margin: 0 0 4px;
+    color: #17063b;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 16.8px;
+
+    .email-checklist-checked & {
+      color: #746a89;
+      text-decoration: line-through;
+    }
+  }
+
+  p {
+    margin: 0 0 12px;
+    color: #746a89;
+    font-size: 14px;
+    line-height: 16.8px;
+  }
+
+  .email-btn-table {
+    width: 100px;
+  }
+
+  .email-btn-td {
+    mso-padding-alt: 10px;
+  }
+
+  .email-btn-a {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  div + div {
+    margin-inline-start: auto;
+    margin-bottom: 12px;
+  }
+}
+
+// Welcome email
+.email-welcome-apps-btns {
+  font-size: 12px;
+  line-height: 44px;
+}
+
+.email-column-td {
+  padding: 0 8px;
+  vertical-align: top;
+}
+
+.email-link-with-arrow {
+  color: #6364ff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 16.8px;
+
+  &:hover {
+    color: #563acc !important;
+  }
+
+  span {
+    font-size: 12px;
+    font-weight: 400;
+  }
+}
+
+.email-column-action-td {
+  padding: 24px 0;
+  color: #6364ff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 16.8px;
+  text-align: center;
+}
+
+// Follow and hashtags
+.email-mini-wrapper-td {
+  padding: 4px 0;
+
+  table {
+    table-layout: fixed;
+  }
+}
+
+.email-mini-td {
+  border-radius: 12px;
+  border: 1px solid #e8e6eb;
+  background-color: #fff;
+  padding: 15px 16px;
+}
+
+.email-mini-follow-img-td {
+  width: 40px;
+  vertical-align: top;
+
+  img {
+    border-radius: 8px;
+  }
+}
+
+.email-mini-follow-text-td {
+  padding-left: 8px;
+  padding-right: 16px;
+  vertical-align: top;
+
+  h3 {
+    color: #17063b;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  p {
+    color: #746a89;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+
+.email-mini-follow-btn-td {
+  width: 68px;
+  vertical-align: top;
+
+  .email-btn-table {
+    width: 100%;
+  }
+
+  .email-btn-td {
+    mso-padding-alt: 10px;
+  }
+
+  .email-btn-a {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.email-mini-hashtag-td {
+  height: 40px;
+
+  td {
+    vertical-align: middle;
+  }
+
+  h3 {
+    color: #17063b;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  p {
+    color: #746a89;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    word-break: break-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.email-mini-hashtag-img-td {
+  width: 40px;
+  height: 20px;
+  white-space: nowrap;
+  text-indent: -2px;
+  font-size: 0;
+
+  & + td {
+    padding-left: 8px;
+  }
+}
+
+.email-mini-hashtag-img-span {
+  display: inline-block;
+  max-width: 12px;
+  font-size: 12px;
+
+  img {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    max-width: none;
+    border: 2px solid #fff;
+    vertical-align: middle;
+  }
+}
+
+// Extra content on light purple background
+.email-extra-wave {
+  height: 42px;
+  background-image: url('../../images/mailer-new/welcome/purple-extra-soft-wave.png');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+}
+
+.email-extra-td {
+  padding: 32px 32px 24px;
+  background-color: #f0f0ff;
+  background-image: url('../../images/mailer-new/welcome/purple-extra-soft-spacer.png'); // Using an image to maintain the color even in forced dark modes
+
+  .email-column-td {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+// Feature card
+.email-feature-wrapper-td {
+  padding: 8px 0;
+}
+
+.email-feature-td {
+  padding: 24px;
+  background-color: #fff;
+  border: 1px solid #e8e6eb;
+  border-radius: 12px;
+}
+
+// Responsive
+/* stylelint-disable-next-line media-feature-range-notation -- Basic media queries have better support across email clients. */
+@media only screen and (min-width: 740px) {
+  .email-desktop-p-8 {
+    padding: 32px !important;
+  }
+
+  .email-desktop-rounded-16px {
+    border-radius: 16px !important;
+  }
+
+  .email-header-td {
+    border-radius: 16px 16px 0 0 !important;
+  }
+
+  .email-desktop-flex {
+    display: flex;
+  }
+
+  .email-header-left {
+    padding-right: 32px;
+  }
+
+  .email-header-right {
+    width: 240px;
+    margin-inline-start: auto;
+  }
+
+  .email-desktop-column {
+    max-width: 346px !important;
+  }
+
+  .email-desktop-text-right {
+    text-align: right;
+  }
+}
diff --git a/app/javascript/styles_new/fonts/inter.scss b/app/javascript/styles_new/fonts/inter.scss
new file mode 100644
index 00000000000..816fc75b85a
--- /dev/null
+++ b/app/javascript/styles_new/fonts/inter.scss
@@ -0,0 +1,8 @@
+@font-face {
+  font-family: Inter;
+  src: url('../../fonts/inter/inter-variable-font-slnt-wght.woff2')
+    format('woff2-variations');
+  font-weight: 100 900;
+  font-style: normal;
+  mso-generic-font-family: swiss;
+}
diff --git a/app/javascript/styles_new/fonts/roboto-mono.scss b/app/javascript/styles_new/fonts/roboto-mono.scss
new file mode 100644
index 00000000000..d51cb01c91f
--- /dev/null
+++ b/app/javascript/styles_new/fonts/roboto-mono.scss
@@ -0,0 +1,13 @@
+@font-face {
+  font-family: mastodon-font-monospace;
+  src:
+    local('Roboto Mono'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
+      format('svg');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
diff --git a/app/javascript/styles_new/fonts/roboto.scss b/app/javascript/styles_new/fonts/roboto.scss
new file mode 100644
index 00000000000..ea4b842b0c4
--- /dev/null
+++ b/app/javascript/styles_new/fonts/roboto.scss
@@ -0,0 +1,55 @@
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto Italic'),
+    url('@/fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-italic-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont')
+      format('svg');
+  font-weight: normal;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto Bold'),
+    url('@/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-bold-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont')
+      format('svg');
+  font-weight: bold;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto Medium'),
+    url('@/fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-medium-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont')
+      format('svg');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: mastodon-font-sans-serif;
+  src:
+    local('Roboto'),
+    url('@/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+    url('@/fonts/roboto/roboto-regular-webfont.woff') format('woff'),
+    url('@/fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
+    url('@/fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont')
+      format('svg');
+  font-weight: normal;
+  font-display: swap;
+  font-style: normal;
+}
diff --git a/app/javascript/styles_new/mastodon-light.scss b/app/javascript/styles_new/mastodon-light.scss
new file mode 100644
index 00000000000..494efdbbde9
--- /dev/null
+++ b/app/javascript/styles_new/mastodon-light.scss
@@ -0,0 +1,9 @@
+@use 'mastodon-light/css_variables';
+@use 'mastodon/variables' with (
+  $emojis-requiring-inversion: 'chains'
+);
+@use 'common';
+
+html {
+  color-scheme: light;
+}
diff --git a/app/javascript/styles_new/mastodon-light/css_variables.scss b/app/javascript/styles_new/mastodon-light/css_variables.scss
new file mode 100644
index 00000000000..70745ec071a
--- /dev/null
+++ b/app/javascript/styles_new/mastodon-light/css_variables.scss
@@ -0,0 +1,214 @@
+@use '../mastodon/theme_utils' as utils;
+
+:root {
+  --color-black: #000;
+  --color-grey-950: #181821;
+  --color-grey-800: #292938;
+  --color-grey-700: #444664;
+  --color-grey-600: #545778;
+  --color-grey-500: #696d91;
+  --color-grey-400: #8b8dac;
+  --color-grey-300: #b4b6cb;
+  --color-grey-200: #d8d9e3;
+  --color-grey-100: #f0f0f5;
+  --color-grey-50: #f0f1ff;
+  --color-white: #fff;
+  --color-indigo-600: #6147e6;
+  --color-indigo-400: #8886ff;
+  --color-indigo-300: #a5abfd;
+  --color-indigo-200: #c8cdfe;
+  --color-indigo-100: #e0e3ff;
+  --color-indigo-50: #f0f1ff;
+  --color-red-500: #ff637e;
+  --color-red-600: #ec003f;
+  --color-yellow-400: #ffb900;
+  --color-yellow-600: #e17100;
+  --color-green-400: #05df72;
+  --color-green-600: #00a63e;
+
+  /* TEXT TOKENS */
+
+  --color-text-primary: var(--color-grey-950);
+  --color-text-secondary: var(--color-grey-600);
+  --color-text-tertiary: var(--color-grey-500);
+  --color-text-on-inverted: var(--color-white);
+  --color-text-brand: var(--color-indigo-600);
+  --color-text-brand-soft: color-mix(
+    in oklab,
+    var(--color-text-primary),
+    var(--color-text-brand)
+  );
+  --color-text-on-brand-base: var(--color-white);
+  --color-text-error: var(--color-red-600);
+  --color-text-on-error-base: var(--color-white);
+  --color-text-warning: var(--color-yellow-600);
+  --color-text-on-warning-base: var(--color-white);
+  --color-text-success: var(--color-green-600);
+  --color-text-on-success-base: var(--color-white);
+  --color-text-disabled: var(--color-grey-300);
+  --color-text-on-disabled: var(--color-grey-200);
+  --color-text-bookmark-highlight: var(--color-text-error);
+  --color-text-favourite-highlight: var(--color-text-warning);
+  --color-text-on-media: var(--color-white);
+  --color-text-status-links: var(--color-text-brand);
+
+  /* BACKGROUND TOKENS */
+
+  // Neutrals
+  --color-bg-primary: var(--color-white);
+  --overlay-strength-secondary: 5%;
+  --color-bg-secondary-base: var(--color-grey-600);
+  --color-bg-secondary: #{color-mix(
+      in oklab,
+      var(--color-bg-primary),
+      var(--color-bg-secondary-base) var(--overlay-strength-secondary)
+    )};
+  --color-bg-secondary-solid: #{color-mix(
+      in srgb,
+      var(--color-bg-primary),
+      var(--color-bg-secondary-base) var(--overlay-strength-secondary)
+    )};
+  --color-bg-tertiary: #{color-mix(
+      in oklab,
+      var(--color-bg-primary),
+      var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
+    )};
+
+  // Utility
+  --color-bg-ambient: var(--color-bg-primary);
+  --color-bg-elevated: var(--color-bg-primary);
+  --color-bg-inverted: var(--color-grey-950);
+  --color-bg-media-base: var(--color-black);
+  --color-bg-media-strength: 65%;
+  --color-bg-media: #{utils.css-alpha(
+      var(--color-bg-media-base),
+      var(--color-bg-media-strength)
+    )};
+  --color-bg-overlay: var(--color-bg-primary);
+  --color-bg-disabled: var(--color-grey-400);
+
+  // Brand
+  --overlay-strength-brand: 8%;
+  --color-bg-brand-base: var(--color-indigo-600);
+  --color-bg-brand-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-brand-base),
+    black var(--overlay-strength-brand)
+  );
+  --color-bg-brand-soft: #{utils.css-alpha(
+      var(--color-bg-brand-base),
+      calc(var(--overlay-strength-brand) * 1.5)
+    )};
+  --color-bg-brand-softer: #{utils.css-alpha(
+      var(--color-bg-brand-base),
+      var(--overlay-strength-brand)
+    )};
+
+  // Error
+  --overlay-strength-error: 12%;
+  --color-bg-error-base: var(--color-red-600);
+  --color-bg-error-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-error-base),
+    black var(--overlay-strength-error)
+  );
+  --color-bg-error-soft: #{utils.css-alpha(
+      var(--color-bg-error-base),
+      calc(var(--overlay-strength-error) * 1.5)
+    )};
+  --color-bg-error-softer: #{utils.css-alpha(
+      var(--color-bg-error-base),
+      var(--overlay-strength-error)
+    )};
+
+  // Warning
+  --overlay-strength-warning: 10%;
+  --color-bg-warning-base: var(--color-yellow-600);
+  --color-bg-warning-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-warning-base),
+    black var(--overlay-strength-warning)
+  );
+  --color-bg-warning-soft: #{utils.css-alpha(
+      var(--color-bg-warning-base),
+      calc(var(--overlay-strength-warning) * 1.5)
+    )};
+  --color-bg-warning-softer: #{utils.css-alpha(
+      var(--color-bg-warning-base),
+      var(--overlay-strength-warning)
+    )};
+
+  // Success
+  --overlay-strength-success: 15%;
+  --color-bg-success-base: var(--color-green-600);
+  --color-bg-success-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-success-base),
+    black var(--overlay-strength-success)
+  );
+  --color-bg-success-soft: #{utils.css-alpha(
+      var(--color-bg-success-base),
+      calc(var(--overlay-strength-success) * 1.5)
+    )};
+  --color-bg-success-softer: #{utils.css-alpha(
+      var(--color-bg-success-base),
+      var(--overlay-strength-success)
+    )};
+
+  /* BORDER TOKENS */
+
+  --border-strength-primary: 15%;
+  --color-border-primary: color-mix(
+    in oklab,
+    var(--color-bg-primary),
+    var(--color-grey-950) var(--border-strength-primary)
+  );
+  --color-border-media: rgb(252 248 255 / 15%);
+  --color-border-on-bg-secondary: var(--color-grey-200);
+  --color-border-on-bg-brand-softer: var(--color-indigo-200);
+  --color-border-on-bg-error-softer: #{utils.css-alpha(
+      var(--color-text-error),
+      50%
+    )};
+  --color-border-on-bg-warning-softer: #{utils.css-alpha(
+      var(--color-text-warning),
+      50%
+    )};
+  --color-border-on-bg-success-softer: #{utils.css-alpha(
+      var(--color-text-success),
+      50%
+    )};
+  --color-border-on-bg-inverted: var(--color-border-primary);
+
+  /* SHADOW TOKENS */
+
+  --shadow-strength-primary: 30%;
+  --color-shadow-primary: #{utils.css-alpha(
+      var(--color-black),
+      var(--shadow-strength-primary)
+    )};
+  --dropdown-shadow:
+    0 20px 25px -5px var(--color-shadow-primary),
+    0 8px 10px -6px var(--color-shadow-primary);
+  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
+
+  /* GRAPHS/CHARTS TOKENS */
+
+  --color-graph-primary-stroke: var(--color-text-brand);
+  --color-graph-primary-fill: var(--color-bg-brand-softer);
+  --color-graph-warning-stroke: var(--color-text-warning);
+  --color-graph-warning-fill: var(--color-bg-warning-softer);
+  --color-graph-disabled-stroke: var(--color-text-disabled);
+  --color-graph-disabled-fill: var(--color-bg-disabled);
+
+  /* LEGACY TOKENS */
+
+  --rich-text-container-color: rgb(255 216 231 / 100%);
+  --rich-text-text-color: rgb(114 47 83 / 100%);
+  --rich-text-decorations-color: rgb(255 175 212 / 100%);
+
+  /* MISCELLANEOUS */
+
+  --outline-focus-default: 2px solid var(--color-text-brand);
+  --avatar-border-radius: 8px;
+}
diff --git a/app/javascript/styles_new/mastodon/_mixins.scss b/app/javascript/styles_new/mastodon/_mixins.scss
new file mode 100644
index 00000000000..effbe82c3d8
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/_mixins.scss
@@ -0,0 +1,45 @@
+@mixin search-input {
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  box-shadow: none;
+  font-family: inherit;
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-radius: 4px;
+  border: 1px solid var(--color-border-on-bg-secondary);
+  font-size: 17px;
+  line-height: normal;
+  margin: 0;
+}
+
+@mixin search-popout {
+  background: var(--color-bg-elevated);
+  border-radius: 4px;
+  padding: 10px 14px;
+  padding-bottom: 14px;
+  margin-top: 10px;
+  color: var(--color-text-secondary);
+  box-shadow: 2px 4px 15px var(--color-shadow-primary);
+
+  h4 {
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  li {
+    padding: 4px 0;
+  }
+
+  ul {
+    margin-bottom: 10px;
+  }
+
+  em {
+    font-weight: 500;
+    color: var(--color-text-primary);
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/_theme_utils.scss b/app/javascript/styles_new/mastodon/_theme_utils.scss
new file mode 100644
index 00000000000..1c03c2f65cd
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/_theme_utils.scss
@@ -0,0 +1,3 @@
+@function css-alpha($base-color, $amount) {
+  @return #{rgb(from $base-color r g b / $amount)};
+}
diff --git a/app/javascript/styles_new/mastodon/_variables.scss b/app/javascript/styles_new/mastodon/_variables.scss
new file mode 100644
index 00000000000..a948dbc41c5
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/_variables.scss
@@ -0,0 +1,27 @@
+// Keep this filter a SCSS variable rather than
+// a CSS Custom Property due to this Safari bug:
+// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
+$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 1175px;
+$mobile-menu-breakpoint: 760px;
+$mobile-breakpoint: 630px;
+$no-columns-breakpoint: 600px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
+  'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
+  'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
+  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
diff --git a/app/javascript/styles_new/mastodon/about.scss b/app/javascript/styles_new/mastodon/about.scss
new file mode 100644
index 00000000000..0bb2c8c9eb2
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/about.scss
@@ -0,0 +1,130 @@
+@use 'variables' as *;
+
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+
+.container {
+  box-sizing: border-box;
+  max-width: $maximum-width;
+  margin: 0 auto;
+  position: relative;
+
+  @media screen and (max-width: $fluid-breakpoint) {
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+
+.brand {
+  position: relative;
+  text-decoration: none;
+}
+
+.rules-list {
+  font-size: 15px;
+  line-height: 22px;
+  counter-reset: list-counter;
+
+  li {
+    position: relative;
+    border-bottom: 1px solid var(--color-border-primary);
+    padding: 1em 1.75em;
+    padding-inline-start: 3em;
+    font-weight: 500;
+    counter-increment: list-counter;
+    min-height: 4ch;
+
+    button {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      text-align: start;
+      font: inherit;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: transparent;
+      }
+
+      &[aria-expanded='false'] .rules-list__hint {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        @supports (-webkit-line-clamp: 2) {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          white-space: normal;
+        }
+      }
+    }
+
+    &::before {
+      content: counter(list-counter);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 1em;
+      background: var(--color-bg-brand-base);
+      color: var(--color-text-on-brand-base);
+      border-radius: 50%;
+      width: 4ch;
+      height: 4ch;
+      font-weight: 500;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__text {
+    color: var(--color-text-primary);
+  }
+
+  &__hint {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--color-text-secondary);
+  }
+}
+
+.rules-languages {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  position: relative;
+
+  > label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: inherit;
+    resize: vertical;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    padding-inline-start: 10px;
+    padding-inline-end: 30px;
+    height: 41px;
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/accessibility.scss b/app/javascript/styles_new/mastodon/accessibility.scss
new file mode 100644
index 00000000000..7cd2d4eae39
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/accessibility.scss
@@ -0,0 +1,13 @@
+@use 'variables' as *;
+
+%emoji-color-inversion {
+  filter: invert(1);
+}
+
+.emojione {
+  @each $emoji in $emojis-requiring-inversion {
+    &[title=':#{$emoji}:'] {
+      @extend %emoji-color-inversion;
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/accounts.scss b/app/javascript/styles_new/mastodon/accounts.scss
new file mode 100644
index 00000000000..dab604be2ad
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/accounts.scss
@@ -0,0 +1,411 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.card {
+  & > a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    overflow: hidden;
+    border-radius: 4px;
+
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: var(--color-bg-brand-softer);
+      }
+    }
+  }
+
+  &__img {
+    height: 130px;
+    position: relative;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border-primary);
+    border-bottom: none;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      object-fit: cover;
+    }
+
+    @media screen and (width <= 600px) {
+      height: 200px;
+    }
+  }
+
+  &__bar {
+    position: relative;
+    padding: 15px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border-primary);
+    border-top: none;
+
+    .avatar {
+      flex: 0 0 auto;
+      width: 48px;
+      height: 48px;
+      padding-top: 2px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        margin: 0;
+        border-radius: 4px;
+        background: var(--color-bg-secondary);
+        object-fit: cover;
+      }
+    }
+
+    .display-name {
+      margin-inline-start: 15px;
+      text-align: start;
+
+      svg[data-hidden] {
+        display: none;
+      }
+
+      strong {
+        font-size: 15px;
+        color: var(--color-text-primary);
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      span {
+        display: block;
+        font-size: 14px;
+        color: var(--color-text-secondary);
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.pagination {
+  padding: 30px 0;
+  text-align: center;
+  overflow: hidden;
+
+  a,
+  .current,
+  .newer,
+  .older,
+  .page,
+  .gap {
+    font-size: 14px;
+    color: var(--color-text-primary);
+    font-weight: 500;
+    display: inline-block;
+    padding: 6px 10px;
+    text-decoration: none;
+  }
+
+  .current {
+    color: var(--color-bg-inverted);
+    background: var(--color-text-on-inverted);
+    border-radius: 100px;
+    cursor: default;
+    margin: 0 10px;
+  }
+
+  .gap {
+    cursor: default;
+  }
+
+  .older,
+  .newer {
+    text-transform: uppercase;
+    color: var(--color-text-primary);
+  }
+
+  .older {
+    float: left;
+    padding-inline-start: 0;
+  }
+
+  .newer {
+    float: right;
+    padding-inline-end: 0;
+  }
+
+  .disabled {
+    cursor: default;
+    color: var(--color-text-disabled);
+  }
+
+  @media screen and (width <= 700px) {
+    padding: 30px 20px;
+
+    .page {
+      display: none;
+    }
+
+    .newer,
+    .older {
+      display: inline-block;
+    }
+  }
+}
+
+.nothing-here {
+  color: var(--color-text-secondary);
+  background: var(--color-bg-primary);
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+  border-radius: 4px;
+  padding: 20px;
+  min-height: 30vh;
+  border: 1px solid var(--color-border-primary);
+
+  @media screen and (min-width: ($no-gap-breakpoint - 1)) {
+    border-top: 0;
+  }
+
+  &--no-toolbar {
+    border-top: 1px solid var(--color-border-primary);
+  }
+
+  &--under-tabs {
+    border-radius: 0 0 4px 4px;
+  }
+
+  &--flexible {
+    box-sizing: border-box;
+    min-height: 100%;
+  }
+}
+
+.information-badge,
+.simple_form .overridden,
+.simple_form .recommended,
+.simple_form .not_recommended {
+  display: inline-block;
+  padding: 4px 6px;
+  cursor: default;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.information-badge,
+.simple_form .overridden,
+.simple_form .recommended,
+.simple_form .not_recommended {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+}
+
+.information-badge {
+  &.superapp {
+    color: var(--color-text-success);
+    background-color: var(--color-bg-success-softer);
+    border-color: var(--color-border-on-bg-success-softer);
+  }
+}
+
+.account-role {
+  display: inline-flex;
+  padding: 4px;
+  padding-inline-end: 8px;
+  border: 1px solid var(--color-text-brand);
+  color: var(--color-text-brand);
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  line-height: 16px;
+  gap: 4px;
+  border-radius: 6px;
+  align-items: center;
+
+  svg {
+    width: auto;
+    height: 15px;
+    opacity: 0.85;
+    fill: currentColor;
+  }
+
+  &__domain {
+    font-weight: 400;
+    opacity: 0.75;
+    letter-spacing: 0;
+  }
+}
+
+.simple_form .not_recommended {
+  color: var(--color-text-error);
+  background-color: var(--color-bg-error-softer);
+  border-color: var(--color-border-on-bg-error-softer);
+}
+
+.account__header__fields {
+  max-width: 100vw;
+  padding: 0;
+  margin: 15px -15px -15px;
+  border: 0 none;
+  border-top: 1px solid var(--color-border-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  font-size: 14px;
+  line-height: 20px;
+
+  dl {
+    display: flex;
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+
+  dt,
+  dd {
+    box-sizing: border-box;
+    padding: 14px;
+    text-align: center;
+    max-height: 48px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  dt {
+    font-weight: 500;
+    width: 120px;
+    flex: 0 0 auto;
+    color: var(--color-text-primary);
+    background: var(--color-bg-secondary);
+  }
+
+  dd {
+    flex: 1 1 auto;
+    color: var(--color-text-secondary);
+  }
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .verified {
+    border: 1px solid var(--color-border-on-bg-success-softer);
+    background: var(--color-bg-success-softer);
+
+    a {
+      color: var(--color-text-success);
+      font-weight: 500;
+    }
+
+    &__mark {
+      color: var(--color-text-success);
+    }
+  }
+
+  dl:last-child {
+    border-bottom: 0;
+  }
+}
+
+.directory__tag .trends__item__current {
+  width: auto;
+}
+
+.pending-account {
+  &__header {
+    color: var(--color-text-secondary);
+
+    a {
+      color: var(--color-text-primary);
+      text-decoration: none;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+
+    strong {
+      color: var(--color-text-primary);
+      font-weight: 700;
+    }
+
+    .warning-hint {
+      font-weight: normal !important;
+    }
+  }
+
+  &__body {
+    margin-top: 10px;
+  }
+}
+
+.batch-table__row--muted {
+  color: var(--color-text-tertiary);
+}
+
+.batch-table__row--muted .pending-account__header,
+.batch-table__row--muted .accounts-table,
+.batch-table__row--muted .name-tag {
+  &,
+  a,
+  strong {
+    color: var(--color-text-tertiary);
+  }
+}
+
+.batch-table__row--muted .name-tag .avatar {
+  opacity: 0.5;
+}
+
+.batch-table__row--muted .accounts-table {
+  tbody td.accounts-table__extra,
+  &__count,
+  &__count small {
+    color: var(--color-text-tertiary);
+  }
+}
+
+.batch-table__row--attention {
+  color: var(--color-text-warning);
+}
+
+.batch-table__row--attention .pending-account__header,
+.batch-table__row--attention .accounts-table,
+.batch-table__row--attention .name-tag {
+  &,
+  a,
+  strong {
+    color: var(--color-text-warning);
+  }
+}
+
+.batch-table__row--attention .accounts-table {
+  tbody td.accounts-table__extra,
+  &__count,
+  &__count small {
+    color: var(--color-text-warning);
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/admin.scss b/app/javascript/styles_new/mastodon/admin.scss
new file mode 100644
index 00000000000..ee0cec1a1e7
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/admin.scss
@@ -0,0 +1,2173 @@
+@use 'sass:color';
+@use 'sass:math';
+@use 'variables' as *;
+
+$no-columns-breakpoint: 890px;
+$sidebar-width: 300px;
+$content-width: 840px;
+
+.admin-wrapper {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: top;
+    margin: 0 2px;
+  }
+
+  .sidebar-wrapper {
+    min-height: 100vh;
+    min-height: 100dvh;
+    overflow: hidden;
+    pointer-events: none;
+    flex: 1 1 auto;
+
+    &__inner {
+      display: flex;
+      justify-content: flex-end;
+      height: 100%;
+    }
+  }
+
+  .sidebar {
+    width: $sidebar-width;
+    padding: 0;
+    pointer-events: auto;
+
+    &__toggle {
+      display: none;
+      background: var(--color-bg-primary);
+      border-bottom: 1px solid var(--color-border-primary);
+      align-items: center;
+
+      &__logo {
+        flex: 1 1 auto;
+
+        a {
+          display: block;
+          padding: 15px;
+        }
+      }
+
+      &__icon {
+        display: block;
+        color: var(--color-text-secondary);
+        text-decoration: none;
+        flex: 0 0 auto;
+        font-size: 18px;
+        padding: 10px;
+        margin: 5px 10px;
+        border-radius: 4px;
+
+        &:focus {
+          background: var(--color-bg-brand-softer);
+        }
+
+        .material-close {
+          display: none;
+        }
+
+        &.active {
+          .material-close {
+            display: block;
+          }
+
+          .material-menu {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .logo {
+      display: block;
+      margin: 40px auto;
+      width: 100px;
+      height: 100px;
+    }
+
+    .logo--wordmark {
+      display: inherit;
+      margin: inherit;
+      width: inherit;
+      height: 25px;
+    }
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      & > a:first-child {
+        display: none;
+      }
+    }
+
+    ul {
+      list-style: none;
+      overflow: hidden;
+      margin-bottom: 20px;
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        margin-bottom: 0;
+      }
+
+      a {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 15px;
+        color: var(--color-text-secondary);
+        text-decoration: none;
+        transition: all 200ms linear;
+        transition-property: color, background-color;
+
+        &:hover {
+          color: var(--color-text-primary);
+          transition: all 100ms linear;
+          transition-property: color, background-color;
+        }
+      }
+
+      ul {
+        margin: 0;
+
+        a {
+          border: 0;
+          padding: 15px 35px;
+        }
+      }
+
+      .warning a {
+        color: var(--color-text-warning);
+        font-weight: 700;
+      }
+
+      .simple-navigation-active-leaf a {
+        color: var(--color-text-brand);
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .content-wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: $content-width;
+    flex: 1 1 auto;
+  }
+
+  @media screen and (max-width: ($content-width + $sidebar-width)) {
+    .sidebar-wrapper--empty {
+      display: none;
+    }
+
+    .sidebar-wrapper {
+      width: $sidebar-width;
+      flex: 0 0 auto;
+    }
+  }
+
+  @media screen and (max-width: $no-columns-breakpoint) {
+    .sidebar-wrapper {
+      width: 100%;
+    }
+  }
+
+  .content {
+    padding-top: 55px;
+    padding-bottom: 20px;
+    padding-inline-start: 25px;
+    padding-inline-end: 15px;
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      max-width: none;
+      padding: 15px;
+      padding-top: 30px;
+    }
+
+    &__heading {
+      margin-bottom: 45px;
+
+      &__row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: -15px;
+        margin-inline-end: -15px;
+
+        & > * {
+          margin-top: 15px;
+          margin-inline-end: 15px;
+        }
+      }
+
+      &__tabs {
+        margin-top: 30px;
+        width: 100%;
+
+        & > div {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 5px;
+        }
+
+        a {
+          font-size: 14px;
+          display: inline-flex;
+          align-items: center;
+          padding: 7px 10px;
+          border-radius: 4px;
+          color: var(--color-text-secondary);
+          text-decoration: none;
+          font-weight: 500;
+          gap: 5px;
+          white-space: nowrap;
+
+          @media screen and (max-width: $mobile-breakpoint) {
+            flex: 1 0 50%;
+          }
+
+          &:hover,
+          &:focus,
+          &:active {
+            background: var(--color-bg-secondary);
+          }
+
+          &.selected {
+            font-weight: 700;
+            color: var(--color-text-on-brand-base);
+            background: var(--color-bg-brand-base);
+          }
+        }
+      }
+
+      &__actions {
+        display: inline-flex;
+        flex-flow: wrap;
+        gap: 5px;
+        align-items: center;
+
+        .time-period {
+          padding: 0 10px;
+        }
+
+        .back-link {
+          margin-bottom: 0;
+        }
+      }
+
+      h2 small {
+        font-size: 12px;
+        display: block;
+        font-weight: 500;
+        color: var(--color-text-secondary);
+        line-height: 18px;
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        border-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    h2 {
+      color: var(--color-text-primary);
+      font-size: 24px;
+      line-height: 36px;
+      font-weight: 700;
+    }
+
+    h3 {
+      color: var(--color-text-primary);
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 400;
+      margin-bottom: 30px;
+    }
+
+    h4 {
+      text-transform: uppercase;
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--color-text-secondary);
+      padding-top: 24px;
+      margin-bottom: 8px;
+      border-top: 1px solid var(--color-border-primary);
+    }
+
+    h6 {
+      font-size: 16px;
+      color: var(--color-text-primary);
+      line-height: 28px;
+      font-weight: 500;
+    }
+
+    .fields-group h6 {
+      color: var(--color-text-primary);
+      font-weight: 500;
+    }
+
+    .directory__tag h4 {
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--color-text-primary);
+      text-transform: none;
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: 0;
+
+      .comment {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 4px;
+
+        &.private-comment {
+          display: block;
+          color: var(--color-text-secondary);
+        }
+
+        &.public-comment {
+          display: block;
+          color: var(--color-text-primary);
+        }
+      }
+    }
+
+    & > p {
+      font-size: 14px;
+      line-height: 21px;
+      color: var(--color-text-primary);
+      margin-bottom: 20px;
+
+      strong {
+        color: var(--color-text-primary);
+        font-weight: 500;
+
+        @each $lang in $cjk-langs {
+          &:lang(#{$lang}) {
+            font-weight: 700;
+          }
+        }
+      }
+    }
+
+    hr {
+      width: 100%;
+      height: 0;
+      border: 0;
+      border-bottom: 1px solid var(--color-border-primary);
+      margin: 20px 0;
+
+      &.spacer {
+        height: 1px;
+        border: 0;
+      }
+    }
+  }
+
+  @media screen and (max-width: $no-columns-breakpoint) {
+    display: block;
+
+    .sidebar-wrapper {
+      min-height: 0;
+    }
+
+    .sidebar {
+      width: 100%;
+      padding: 0;
+      height: auto;
+
+      &__toggle {
+        display: flex;
+      }
+
+      & > ul {
+        display: none;
+
+        &.visible {
+          display: block;
+          position: fixed;
+          z-index: 10;
+          width: 100%;
+          height: calc(100% - 56px);
+          inset-inline-start: 0;
+          bottom: 0;
+          overflow-y: auto;
+          background: var(--color-bg-primary);
+        }
+      }
+
+      ul a,
+      ul ul a {
+        font-size: 16px;
+        border-radius: 0;
+        transition: none;
+
+        &:hover {
+          transition: none;
+        }
+      }
+
+      ul ul {
+        border-radius: 0;
+      }
+
+      ul .simple-navigation-active-leaf a {
+        border-bottom-color: var(--color-text-brand);
+      }
+    }
+  }
+}
+
+hr.spacer {
+  width: 100%;
+  border: 0;
+  margin: 20px 0;
+  height: 1px;
+}
+
+body,
+.admin-wrapper .content {
+  .muted-hint {
+    color: var(--color-text-secondary);
+
+    a {
+      color: var(--color-text-brand);
+    }
+  }
+
+  .positive-hint,
+  .negative-hint,
+  .neutral-hint {
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:focus,
+      &:hover,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .positive-hint {
+    color: var(--color-text-success);
+    font-weight: 500;
+  }
+
+  .negative-hint {
+    color: var(--color-text-error);
+    font-weight: 500;
+  }
+
+  .neutral-hint {
+    color: var(--color-text-primary);
+    font-weight: 500;
+  }
+
+  .warning-hint {
+    color: var(--color-text-warning);
+    font-weight: 500;
+  }
+}
+
+kbd {
+  font-family: Courier, monospace;
+  background-color: var(--color-bg-brand-softer);
+  padding: 4px;
+  padding-bottom: 2px;
+  border-radius: 5px;
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+
+  .filter-subset {
+    flex: 0 0 auto;
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 30px;
+    }
+
+    ul {
+      margin-top: 5px;
+      list-style: none;
+
+      li {
+        display: inline-block;
+        margin-inline-end: 5px;
+      }
+    }
+
+    & > div {
+      display: flex;
+      gap: 5px;
+    }
+
+    strong {
+      font-weight: 500;
+      text-transform: uppercase;
+      font-size: 12px;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          font-weight: 700;
+        }
+      }
+    }
+
+    &--with-select strong {
+      display: block;
+      margin-bottom: 10px;
+    }
+
+    a {
+      display: inline-block;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: 500;
+      border-bottom: 2px solid var(--color-bg-secondary);
+
+      &:hover {
+        color: var(--color-text-primary);
+        border-bottom: 2px solid var(--color-bg-tertiary);
+      }
+
+      &.selected {
+        color: var(--color-text-brand);
+        border-bottom: 2px solid var(--color-text-brand);
+      }
+    }
+  }
+}
+
+.report-accounts {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.report-accounts__item {
+  display: flex;
+  flex: 250px;
+  flex-direction: column;
+  margin: 0 5px;
+
+  & > strong {
+    display: block;
+    margin: 0 0 10px -5px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    color: var(--color-text-primary);
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  .account-card {
+    flex: 1 1 auto;
+  }
+}
+
+.report-status,
+.account-status {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.report-status__actions,
+.account-status__actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  .icon-button {
+    font-size: 24px;
+    width: 24px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+}
+
+.simple_form.new_report_note,
+.simple_form.new_account_moderation_note {
+  max-width: 100%;
+}
+
+.batch-form-box {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 5px;
+
+  #form_status_batch_action {
+    margin: 0 5px 5px 0;
+    font-size: 14px;
+  }
+
+  input.button {
+    margin: 0 5px 5px 0;
+  }
+}
+
+.back-link {
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.special-action-button,
+.back-link {
+  text-align: end;
+  flex: 1 1 auto;
+}
+
+.action-buttons {
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.log-entry {
+  display: block;
+  line-height: 20px;
+  padding: 15px;
+  padding-inline-start: 15px * 2 + 40px;
+  background: var(--color-bg-primary);
+  border-right: 1px solid var(--color-border-primary);
+  border-left: 1px solid var(--color-border-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  position: relative;
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+
+  &:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-top: 1px solid var(--color-border-primary);
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+
+  &__avatar {
+    position: absolute;
+    inset-inline-start: 15px;
+    top: 15px;
+
+    .avatar {
+      border-radius: var(--avatar-border-radius);
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__title {
+    overflow-wrap: break-word;
+  }
+
+  &__timestamp {
+    color: var(--color-text-tertiary);
+  }
+
+  a,
+  .username,
+  .target {
+    color: var(--color-text-primary);
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  a {
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+.strike-entry {
+  display: block;
+  line-height: 20px;
+  padding: 15px;
+  padding-inline-start: 15px * 2 + 40px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  position: relative;
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  margin-bottom: 15px;
+
+  &__avatar {
+    position: absolute;
+    inset-inline-start: 15px;
+    top: 15px;
+
+    .avatar {
+      border-radius: var(--avatar-border-radius);
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__title {
+    overflow-wrap: break-word;
+  }
+
+  &__timestamp {
+    color: var(--color-text-secondary);
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: var(--color-bg-primary);
+  }
+}
+
+a.name-tag,
+.name-tag,
+a.inline-name-tag,
+.inline-name-tag {
+  text-decoration: none;
+  color: var(--color-text-primary);
+
+  &:hover {
+    color: var(--color-text-brand);
+  }
+
+  .username {
+    font-weight: 500;
+  }
+
+  &.suspended {
+    .username {
+      text-decoration: line-through;
+      color: var(--color-text-error);
+    }
+
+    .avatar {
+      filter: grayscale(100%);
+      opacity: 0.8;
+    }
+  }
+}
+
+a.name-tag,
+.name-tag {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+
+  .avatar {
+    display: block;
+    margin: 0;
+    margin-inline-end: 5px;
+    border-radius: 50%;
+  }
+
+  &.suspended {
+    .avatar {
+      filter: grayscale(100%);
+      opacity: 0.8;
+    }
+  }
+}
+
+.speech-bubble {
+  margin-bottom: 20px;
+  border-inline-start: 4px solid var(--color-text-brand);
+
+  &.positive {
+    border-color: var(--color-text-success);
+  }
+
+  &.negative {
+    border-color: var(--color-text-error);
+  }
+
+  &.warning {
+    border-color: var(--color-text-warning);
+  }
+
+  &__bubble {
+    padding: 16px;
+    padding-inline-start: 14px;
+    font-size: 15px;
+    line-height: 20px;
+    border-radius: 4px 4px 4px 0;
+    position: relative;
+    font-weight: 500;
+
+    a {
+      color: var(--color-text-secondary);
+    }
+  }
+
+  &__owner {
+    padding: 8px;
+    padding-inline-start: 12px;
+  }
+
+  time {
+    color: var(--color-text-tertiary);
+  }
+}
+
+.report-card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  margin-bottom: 20px;
+
+  &__profile {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+
+    .account {
+      padding: 0;
+      border: none;
+
+      &__avatar-wrapper {
+        margin-inline-start: 0;
+      }
+    }
+
+    &__stats {
+      flex: 0 0 auto;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      text-align: end;
+
+      a {
+        color: inherit;
+        text-decoration: none;
+
+        &:focus,
+        &:hover,
+        &:active {
+          color: var(--color-text-brand);
+        }
+      }
+
+      .red {
+        color: var(--color-text-error);
+      }
+    }
+  }
+
+  &__summary {
+    &__item {
+      display: flex;
+      justify-content: flex-start;
+      border-top: 1px solid var(--color-border-primary);
+
+      &__reported-by,
+      &__assigned {
+        padding: 15px;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        width: 150px;
+        color: var(--color-text-secondary);
+
+        &,
+        .username {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      &__content {
+        flex: 1 1 auto;
+        max-width: calc(100% - 300px);
+
+        &__icon {
+          margin-inline-end: 4px;
+          font-weight: 500;
+        }
+      }
+
+      &__content a {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 15px;
+        text-decoration: none;
+        color: var(--color-text-secondary);
+
+        &:hover {
+          color: var(--color-text-brand);
+        }
+      }
+    }
+  }
+}
+
+.one-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsized-ip {
+  display: inline-block;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+.admin-account-bio {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -5px;
+  margin-top: 20px;
+
+  > div {
+    box-sizing: border-box;
+    padding: 0 5px;
+    margin-bottom: 10px;
+    flex: 1 0 50%;
+    max-width: 100%;
+  }
+
+  .account__header__fields,
+  .account__header__content {
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    height: 100%;
+  }
+
+  .account__header__fields {
+    margin: 0;
+    border: 1px solid var(--color-border-primary);
+
+    a {
+      color: var(--color-text-brand);
+    }
+
+    dl:first-child .verified {
+      border-radius: 0 4px 0 0;
+    }
+
+    .verified a {
+      color: var(--color-text-success);
+    }
+  }
+
+  .account__header__content {
+    box-sizing: border-box;
+    padding: 20px;
+    color: var(--color-text-primary);
+  }
+}
+
+.center-text {
+  text-align: center;
+}
+
+.applications-list__item,
+.filters-list__item {
+  padding: 15px 0;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  margin-top: 15px;
+}
+
+.applications-list {
+  .icon {
+    vertical-align: middle;
+  }
+}
+
+.announcements-list,
+.filters-list {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  border-bottom: none;
+
+  &__item {
+    padding: 15px 0;
+    border-bottom: 1px solid var(--color-border-primary);
+
+    &__title {
+      padding: 0 15px;
+      display: block;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 1.5;
+      color: var(--color-text-primary);
+      text-decoration: none;
+      margin-bottom: 10px;
+
+      &:hover {
+        color: var(--color-text-brand);
+      }
+
+      .account-role {
+        vertical-align: middle;
+      }
+    }
+
+    .icon {
+      vertical-align: middle;
+    }
+
+    a.announcements-list__item__title {
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--color-text-primary);
+      }
+    }
+
+    &__action-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+
+      &:not(.no-wrap) {
+        flex-wrap: wrap;
+      }
+    }
+
+    &__meta {
+      padding: 0 15px;
+      color: var(--color-text-tertiary);
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: none;
+        }
+      }
+    }
+
+    &__actions {
+      margin-inline-start: auto;
+    }
+
+    &__permissions {
+      margin-top: 10px;
+    }
+  }
+}
+
+.filters-list__item {
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    overflow-wrap: anywhere;
+  }
+
+  &__permissions {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  .expiration {
+    font-size: 13px;
+  }
+
+  &.expired {
+    .expiration {
+      color: var(--color-text-error);
+    }
+
+    .permissions-list__item__icon {
+      color: var(--color-text-secondary);
+    }
+  }
+}
+
+.rule-actions {
+  display: flex;
+  flex-direction: column;
+
+  a.table-action-link {
+    padding-inline-start: 0;
+  }
+}
+
+.dashboard__counters.admin-account-counters {
+  margin-top: 10px;
+}
+
+.account-badges {
+  margin: -2px 0;
+}
+
+.retention {
+  overflow: auto;
+
+  > h4 {
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  &__table {
+    &__number {
+      color: var(--color-bg-primary);
+      padding: 10px;
+    }
+
+    &__date {
+      white-space: nowrap;
+      padding: 10px 0;
+      text-align: start;
+      min-width: 120px;
+
+      &.retention__table__average {
+        font-weight: 700;
+      }
+    }
+
+    &__size {
+      text-align: center;
+      padding: 10px;
+    }
+
+    &__label {
+      font-weight: 700;
+      color: var(--color-text-secondary);
+    }
+
+    &__box {
+      box-sizing: border-box;
+      width: 52px;
+      margin: 1px;
+      padding: 10px;
+      font-weight: 500;
+      color: var(--color-text-primary);
+      background: var(--color-bg-primary);
+
+      @for $i from 0 through 10 {
+        &--#{10 * $i} {
+          @if $i > 5 {
+            color: var(--color-text-on-brand-base);
+          }
+
+          background-color: rgb(
+            from var(--color-bg-brand-base) r g b / #{math.div(max(1, $i), 10)}
+          );
+        }
+      }
+    }
+  }
+}
+
+.sparkline {
+  display: block;
+  text-decoration: none;
+  background: var(--color-bg-primary);
+  border-radius: 4px;
+  border: 1px solid var(--color-border-primary);
+  padding: 0;
+  position: relative;
+  padding-bottom: 55px + 20px;
+  overflow: hidden;
+
+  &__value {
+    display: flex;
+    line-height: 33px;
+    align-items: flex-end;
+    padding: 20px;
+    padding-bottom: 10px;
+
+    &__total {
+      display: block;
+      margin-inline-end: 10px;
+      font-weight: 500;
+      font-size: 28px;
+      color: var(--color-text-primary);
+    }
+
+    &__change {
+      display: block;
+      font-weight: 500;
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      margin-bottom: -3px;
+
+      &.positive {
+        color: var(--color-text-success);
+      }
+
+      &.negative {
+        color: var(--color-text-error);
+      }
+    }
+  }
+
+  &__label {
+    padding: 0 20px;
+    padding-bottom: 10px;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+    font-weight: 500;
+  }
+
+  &__graph {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+
+    svg {
+      display: block;
+      margin: 0;
+    }
+
+    path:first-child {
+      fill: var(--color-graph-primary-fill) !important;
+      fill-opacity: 1 !important;
+    }
+
+    path:last-child {
+      stroke: var(--color-graph-primary-stroke) !important;
+      fill: none !important;
+    }
+  }
+}
+
+a.sparkline {
+  &:hover,
+  &:focus,
+  &:active {
+    background: var(--color-bg-brand-softer);
+  }
+}
+
+.skeleton {
+  background-color: var(--color-bg-primary);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-bg-primary),
+    var(--color-bg-secondary),
+    var(--color-bg-primary)
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+  display: inline-block;
+  line-height: 1;
+  width: 100%;
+  animation: skeleton 1.2s ease-in-out infinite;
+
+  .reduce-motion & {
+    animation: none;
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    background-position: -200px 0;
+  }
+
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.dimension {
+  table {
+    width: 100%;
+  }
+
+  &__item {
+    border-bottom: 1px solid var(--color-border-primary);
+
+    &__key {
+      font-weight: 500;
+      padding: 11px 10px;
+    }
+
+    &__value {
+      text-align: end;
+      color: var(--color-text-secondary);
+      padding: 11px 10px;
+    }
+
+    &__indicator {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--color-text-brand);
+      margin-inline-end: 10px;
+
+      @for $i from 0 through 10 {
+        &--#{10 * $i} {
+          background-color: rgb(
+            from var(--color-text-brand) r g b / #{math.div(max(1, $i), 10)}
+          );
+        }
+      }
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &.negative {
+      color: var(--color-text-error);
+      font-weight: 700;
+
+      .dimension__item__value {
+        color: var(--color-text-error);
+      }
+    }
+  }
+}
+
+.report-reason-selector {
+  border-radius: 4px;
+  background: var(--color-bg-primary);
+  margin-bottom: 20px;
+
+  &__category {
+    cursor: pointer;
+    border-bottom: 1px solid var(--color-border-primary);
+
+    &__label {
+      padding: 15px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    &__rules {
+      margin-inline-start: 30px;
+    }
+  }
+
+  &__rule {
+    cursor: pointer;
+    padding: 15px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.report-header {
+  display: grid;
+  gap: 15px;
+  grid-template-columns: minmax(0, 1fr) 300px;
+
+  &__details {
+    &__item {
+      border-bottom: 1px solid var(--color-border-primary);
+      padding: 15px 0;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &__header {
+        font-weight: 600;
+        padding: 4px 0;
+      }
+    }
+
+    &--horizontal {
+      display: grid;
+      grid-auto-columns: minmax(0, 1fr);
+      grid-auto-flow: column;
+
+      .report-header__details__item {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  @media screen and (width <= 930px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.account-card {
+  border-radius: 4px;
+  border: 1px solid var(--color-border-primary);
+  position: relative;
+
+  &__warning-badge {
+    position: absolute;
+    padding: 4px 10px;
+    top: 10px;
+    inset-inline-start: 10px;
+    border-radius: 4px;
+    background:
+      url('@/images/warning-stripes.svg') repeat-y left,
+      url('@/images/warning-stripes.svg') repeat-y right,
+      var(--color-bg-primary);
+  }
+
+  &__permalink {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &__header {
+    padding: 4px;
+    border-radius: 4px;
+    height: 128px;
+
+    img {
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      background: var(--color-bg-secondary);
+    }
+  }
+
+  &__title {
+    margin-top: -(15px + 8px);
+    display: flex;
+    align-items: flex-end;
+
+    &__avatar {
+      padding: 14px;
+
+      img,
+      .account__avatar {
+        display: block;
+        margin: 0;
+        width: 56px;
+        height: 56px;
+        background-color: var(--color-bg-secondary);
+        border-radius: 8px;
+        border: 1px solid var(--color-border-media);
+      }
+    }
+
+    .display-name {
+      color: var(--color-text-secondary);
+      padding-bottom: 15px;
+      font-size: 15px;
+      line-height: 20px;
+
+      bdi {
+        display: block;
+        color: var(--color-text-primary);
+        font-weight: 700;
+      }
+    }
+  }
+
+  &__bio {
+    padding: 0 15px;
+    margin: 8px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    max-height: 21px * 2;
+    position: relative;
+    font-size: 15px;
+    line-height: 21px;
+
+    &::after {
+      display: block;
+      content: '';
+      width: 50px;
+      height: 21px;
+      position: absolute;
+      bottom: 0;
+      inset-inline-end: 15px;
+      pointer-events: none;
+    }
+
+    a {
+      color: var(--color-text-primary);
+      text-decoration: none;
+      unicode-bidi: isolate;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &.mention {
+        &:hover {
+          text-decoration: none;
+
+          span {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__button {
+      flex-shrink: 1;
+      padding: 0 15px;
+      overflow: hidden;
+
+      .button {
+        min-width: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &__counters {
+    flex: 1 1 auto;
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    max-width: 340px;
+    min-width: 65px * 3;
+
+    &__item {
+      padding: 15px 0;
+      text-align: center;
+      color: var(--color-text-primary);
+      font-weight: 600;
+      font-size: 15px;
+      line-height: 21px;
+
+      small {
+        display: block;
+        color: var(--color-text-secondary);
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+      }
+    }
+  }
+}
+
+.report-notes {
+  margin-bottom: 20px;
+
+  &__item {
+    background: var(--color-bg-primary);
+    position: relative;
+    padding: 15px;
+    padding-inline-start: 15px * 2 + 40px;
+    border: 1px solid var(--color-border-primary);
+
+    &:first-child {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+
+    &__avatar {
+      position: absolute;
+      inset-inline-start: 15px;
+      top: 15px;
+      border-radius: var(--avatar-border-radius);
+      width: 40px;
+      height: 40px;
+    }
+
+    &__header {
+      color: var(--color-text-secondary);
+      font-size: 15px;
+      line-height: 20px;
+      margin-bottom: 4px;
+
+      .username {
+        color: var(--color-text-primary);
+        font-weight: 500;
+        margin-inline-end: 5px;
+
+        a {
+          color: inherit;
+          text-decoration: none;
+
+          &:hover,
+          &:focus,
+          &:active {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      a.timestamp {
+        color: var(--color-text-secondary);
+        text-decoration: none;
+
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: underline;
+        }
+      }
+
+      time {
+        margin-inline-start: 5px;
+        vertical-align: baseline;
+      }
+    }
+
+    &__content {
+      font-size: 15px;
+      line-height: 20px;
+      overflow-wrap: break-word;
+      font-weight: 400;
+      color: var(--color-text-primary);
+
+      p {
+        margin-bottom: 20px;
+        white-space: pre-wrap;
+        unicode-bidi: plaintext;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      a {
+        color: var(--color-text-brand);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &__actions {
+      position: absolute;
+      top: 15px;
+      inset-inline-end: 15px;
+      text-align: end;
+    }
+  }
+}
+
+.report-actions {
+  &__item {
+    display: flex;
+    align-items: center;
+    line-height: 18px;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &__button {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      width: 200px;
+      padding: 15px;
+      padding-inline-end: 0;
+
+      .button {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    &__description {
+      padding: 15px;
+      font-size: 14px;
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  @media screen and (width <= 800px) {
+    border: 0;
+
+    &__item {
+      flex-direction: column;
+      border: 0;
+
+      &__button {
+        width: 100%;
+        padding: 15px 0;
+      }
+
+      &__description {
+        padding: 0;
+        padding-bottom: 15px;
+      }
+    }
+  }
+}
+
+.section-skip-link {
+  float: right;
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+.strike-card {
+  padding: 15px;
+  font-size: 15px;
+  line-height: 20px;
+  overflow-wrap: break-word;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+  min-height: 100%;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  p {
+    margin-bottom: 20px;
+    unicode-bidi: plaintext;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__rules {
+    list-style: disc;
+    padding-inline-start: 15px;
+    margin-bottom: 20px;
+    color: var(--color-text-secondary);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &__text {
+      color: var(--color-text-primary);
+    }
+  }
+
+  &__statuses-list {
+    border-radius: 4px;
+    border: 1px solid var(--color-border-primary);
+    font-size: 13px;
+    line-height: 18px;
+    overflow: hidden;
+
+    &__item {
+      padding: 16px;
+      border-bottom: 1px solid var(--color-border-primary);
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &__meta {
+        color: var(--color-text-secondary);
+      }
+
+      a {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+.availability-indicator {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  font-size: 14px;
+  line-height: 21px;
+
+  &__hint {
+    padding: 0 15px;
+  }
+
+  &__graphic {
+    display: flex;
+    margin: 0 -2px;
+
+    &__item {
+      display: block;
+      flex: 0 0 auto;
+      width: 4px;
+      height: 21px;
+      background: var(--color-bg-secondary);
+      margin: 0 2px;
+      border-radius: 2px;
+
+      &.positive {
+        background: var(--color-bg-success-base);
+      }
+
+      &.negative {
+        background: var(--color-bg-error-base);
+      }
+    }
+  }
+}
+
+.history {
+  counter-reset: step 0;
+  font-size: 15px;
+  line-height: 22px;
+
+  > li {
+    counter-increment: step 1;
+    padding-inline-start: 2.5rem;
+    padding-bottom: 8px;
+    position: relative;
+    margin-bottom: 8px;
+
+    &::before {
+      position: absolute;
+      content: counter(step);
+      font-size: 0.625rem;
+      font-weight: 500;
+      inset-inline-start: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: calc(1.375rem + 1px);
+      height: calc(1.375rem + 1px);
+      background: var(--color-bg-primary);
+      border: 1px solid var(--color-text-brand);
+      color: var(--color-text-brand);
+      border-radius: 8px;
+    }
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 1px;
+      background: var(--color-text-brand);
+      bottom: 0;
+      top: calc(1.875rem + 1px);
+      inset-inline-start: 0.6875rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  &__entry {
+    h5 {
+      font-weight: 500;
+      color: var(--color-text-primary);
+      line-height: 25px;
+      margin-bottom: 16px;
+    }
+
+    .status {
+      border: 1px solid var(--color-border-primary);
+      background: var(--color-bg-secondary);
+      border-radius: 4px;
+    }
+  }
+}
+
+.status__card {
+  padding: 15px;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 20px;
+  overflow-wrap: break-word;
+  font-weight: 400;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+  min-height: 100%;
+
+  &.status--has-quote {
+    .quote-inline {
+      display: none;
+    }
+  }
+
+  .status__quote & {
+    // Remove the border from the .status__card within .status__quote
+    border: none;
+
+    .display-name__account {
+      line-height: inherit;
+    }
+
+    .status__avatar,
+    .status__avatar .account__avatar {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .status__prepend {
+    padding: 0 0 15px;
+    gap: 4px;
+    align-items: center;
+  }
+
+  > details {
+    summary {
+      display: block;
+      box-sizing: border-box;
+      color: var(--color-text-primary);
+      background: var(--color-bg-brand-softer);
+      border: 1px solid var(--color-border-on-bg-brand-softer);
+      border-radius: 8px;
+      padding: 8px 13px;
+      position: relative;
+      font-size: 15px;
+      line-height: 22px;
+      cursor: pointer;
+
+      &::after {
+        content: attr(data-show, 'Show more');
+        margin-top: 8px;
+        display: block;
+        font-size: 15px;
+        line-height: 20px;
+        color: var(--color-text-brand);
+        cursor: pointer;
+        border: 0;
+        background: transparent;
+        padding: 0;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      &:hover,
+      &:focus-visible {
+        &::after {
+          text-decoration: underline !important;
+        }
+      }
+    }
+
+    &[open] summary {
+      margin-bottom: 16px;
+
+      &::after {
+        content: attr(data-hide, 'Hide post');
+      }
+    }
+  }
+
+  .preview-card {
+    position: relative;
+    max-width: 566px;
+
+    .status-card__image {
+      &--video {
+        aspect-ratio: 16 / 9;
+      }
+
+      &--large {
+        aspect-ratio: 1.91 / 1;
+      }
+
+      aspect-ratio: 1;
+    }
+
+    .spoiler-button__overlay__label {
+      outline: 1px solid var(--color-border-media);
+    }
+
+    .hide-button {
+      // Toggled to appear when the preview-card is unblurred:
+      display: none;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      color: var(--color-text-on-media);
+      background: var(--color-bg-media);
+      backdrop-filter: $backdrop-blur-filter;
+      outline: 1px solid var(--color-border-media);
+      border: 0;
+      padding: 3px 12px;
+      border-radius: 99px;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 20px;
+
+      &:hover,
+      &:focus {
+        background-color: rgb(from var(--color-bg-media-base) r g b / 90%);
+      }
+    }
+
+    &.preview-card--image-visible {
+      .hide-button {
+        display: block;
+      }
+
+      .spoiler-button__overlay,
+      .status-card__image-preview {
+        display: none;
+      }
+    }
+  }
+
+  .detailed-status__meta {
+    .detailed-status__application,
+    .detailed-status__datetime,
+    .detailed-status__link {
+      color: inherit;
+    }
+  }
+}
+
+.admin {
+  &__terms-of-service {
+    &__container {
+      background: var(--color-bg-tertiary);
+      border-radius: 8px;
+      border: 1px solid var(--color-border-primary);
+      overflow: hidden;
+
+      &__header {
+        padding: 16px;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--color-text-primary);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      &__body {
+        background: var(--color-bg-primary);
+        padding: 16px;
+        overflow-y: scroll;
+        height: 30vh;
+      }
+    }
+
+    &__history {
+      & > li {
+        border-bottom: 1px solid var(--color-border-primary);
+
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+
+      &__item {
+        padding: 16px 0;
+        padding-bottom: 8px;
+
+        h5 {
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 600;
+          margin-bottom: 16px;
+
+          a {
+            color: inherit;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dot-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+
+  &__indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-text-tertiary);
+  }
+
+  &.success {
+    color: var(--color-text-success);
+
+    .dot-indicator__indicator {
+      background-color: var(--color-bg-success-base);
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/annual_reports.scss b/app/javascript/styles_new/mastodon/annual_reports.scss
new file mode 100644
index 00000000000..a9b7e0ddee0
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/annual_reports.scss
@@ -0,0 +1,342 @@
+@use 'variables' as *;
+
+:root {
+  --indigo-1: #17063b;
+  --indigo-2: #2f0c7a;
+  --indigo-3: #562cfc;
+  --indigo-5: #858afa;
+  --indigo-6: #cccfff;
+  --lime: #baff3b;
+  --goldenrod-2: #ffc954;
+}
+
+.annual-report {
+  flex: 0 0 auto;
+  background: var(--indigo-1);
+  padding: 24px;
+
+  &__header {
+    margin-bottom: 16px;
+
+    h1 {
+      font-size: 25px;
+      font-weight: 600;
+      line-height: 30px;
+      color: var(--lime);
+      margin-bottom: 8px;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 20px;
+      color: var(--indigo-6);
+    }
+  }
+
+  &__bento {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
+        0,
+        auto
+      );
+
+    &__box {
+      padding: 16px;
+      border-radius: 8px;
+      background: var(--indigo-2);
+      color: var(--indigo-5);
+    }
+  }
+
+  &__summary {
+    &__most-boosted-post {
+      grid-column: span 2;
+      grid-row: span 2;
+      padding: 0;
+
+      .status__content,
+      .content-warning {
+        color: var(--indigo-6);
+      }
+
+      .detailed-status {
+        border: 0;
+      }
+
+      .content-warning {
+        border: 0;
+        background: var(--indigo-1);
+
+        .link-button {
+          color: var(--indigo-5);
+        }
+      }
+
+      .detailed-status__meta__line {
+        border-bottom-color: var(--indigo-3);
+      }
+
+      .detailed-status__meta {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .detailed-status__meta,
+      .poll__footer,
+      .poll__link,
+      .detailed-status .logo,
+      .detailed-status__display-name {
+        color: var(--indigo-5);
+      }
+
+      .detailed-status__meta .animated-number,
+      .detailed-status__display-name strong {
+        color: var(--indigo-6);
+      }
+
+      .poll__chart {
+        background-color: var(--indigo-3);
+
+        &.leading {
+          background-color: var(--goldenrod-2);
+        }
+      }
+
+      .status-card,
+      .hashtag-bar {
+        display: none;
+      }
+    }
+
+    &__followers {
+      grid-column: span 1;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+      padding-block-start: 24px;
+      padding-block-end: 24px;
+
+      --sparkline-gradient-top: rgba(86, 44, 252, 50%);
+      --sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
+
+      &__foreground {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        position: relative;
+        z-index: 1;
+      }
+
+      &__number {
+        font-size: 31px;
+        font-weight: 600;
+        line-height: 37px;
+        color: var(--lime);
+      }
+
+      &__label {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 17px;
+        color: var(--indigo-6);
+      }
+
+      &__footnote {
+        display: block;
+        font-weight: 400;
+        opacity: 0.5;
+      }
+
+      svg {
+        position: absolute;
+        bottom: 0;
+        inset-inline-end: 0;
+        pointer-events: none;
+        z-index: 0;
+        height: 70%;
+        width: auto;
+
+        path:first-child {
+          fill: url('#gradient') !important;
+          fill-opacity: 1 !important;
+        }
+
+        path:last-child {
+          stroke: var(--color-graph-primary-stroke) !important;
+          fill: none !important;
+        }
+      }
+    }
+
+    &__archetype {
+      grid-column: span 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 8px;
+      padding: 0;
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+      }
+
+      &__label {
+        padding: 16px;
+        padding-bottom: 8px;
+        font-size: 14px;
+        line-height: 17px;
+        font-weight: 600;
+        color: var(--lime);
+      }
+    }
+
+    &__most-used-app {
+      grid-column: span 1;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      box-sizing: border-box;
+
+      &__label {
+        font-size: 14px;
+        line-height: 17px;
+        font-weight: 600;
+        color: var(--indigo-6);
+      }
+
+      &__icon {
+        font-size: 14px;
+        line-height: 17px;
+        font-weight: 600;
+        color: var(--goldenrod-2);
+      }
+    }
+
+    &__percentile {
+      grid-row: span 2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+      text-wrap: balance;
+      padding: 16px 8px;
+
+      &__label {
+        font-size: 14px;
+        line-height: 17px;
+      }
+
+      &__number {
+        font-size: 54px;
+        font-weight: 600;
+        line-height: 73px;
+        color: var(--goldenrod-2);
+      }
+
+      &__footnote {
+        font-size: 11px;
+        line-height: 14px;
+        opacity: 0.5;
+      }
+    }
+
+    &__new-posts {
+      grid-column: span 2;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+
+      &__label {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--indigo-6);
+        z-index: 1;
+        position: relative;
+      }
+
+      &__number {
+        font-size: 76px;
+        font-weight: 600;
+        line-height: 91px;
+        color: var(--goldenrod-2);
+        z-index: 1;
+        position: relative;
+      }
+
+      svg {
+        position: absolute;
+        inset-inline-start: -7px;
+        top: -4px;
+        z-index: 0;
+      }
+    }
+
+    &__most-used-hashtag {
+      grid-column: span 2;
+      text-align: center;
+      overflow: hidden;
+
+      &__hashtag {
+        font-size: 42px;
+        font-weight: 600;
+        line-height: 58px;
+        color: var(--indigo-6);
+        margin-inline-start: -100%;
+        margin-inline-end: -100%;
+      }
+
+      &__label {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 17px;
+      }
+    }
+  }
+}
+
+.annual-report-modal {
+  max-width: 600px;
+  background: var(--indigo-1);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  .loading-indicator .circular-progress {
+    color: var(--lime);
+  }
+
+  @media screen and (max-width: $no-columns-breakpoint) {
+    border-bottom: 0;
+    border-radius: 16px 16px 0 0;
+  }
+}
+
+.notification-group--annual-report {
+  .notification-group__icon {
+    color: var(--lime);
+  }
+
+  .notification-group__main .link-button {
+    font-weight: 500;
+    color: var(--lime);
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/basics.scss b/app/javascript/styles_new/mastodon/basics.scss
new file mode 100644
index 00000000000..6298409d157
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/basics.scss
@@ -0,0 +1,300 @@
+@use 'variables' as *;
+
+html.has-modal {
+  &,
+  body {
+    touch-action: none;
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: auto;
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    overflow: hidden !important;
+  }
+}
+
+body {
+  font-family: $font-sans-serif, sans-serif;
+  background: var(--color-bg-ambient);
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  text-rendering: optimizelegibility;
+
+  // Disable kerning for Japanese text to preserve monospaced alignment for readability
+  &:not(:lang(ja)) {
+    font-feature-settings: 'kern';
+  }
+
+  text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+  -webkit-tap-highlight-color: transparent;
+
+  &.system-font {
+    // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
+    // -apple-system => Safari <11 specific
+    // BlinkMacSystemFont => Chrome <56 on macOS specific
+    // Segoe UI => Windows 7/8/10
+    // Oxygen => KDE
+    // Ubuntu => Unity/Ubuntu
+    // Cantarell => GNOME
+    // Fira Sans => Firefox OS
+    // Droid Sans => Older Androids (<4.0)
+    // Helvetica Neue => Older macOS <10.11
+    // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Fira Sans',
+      'Droid Sans',
+      'Helvetica Neue',
+      $font-sans-serif,
+      sans-serif;
+  }
+
+  &.app-body {
+    padding: 0;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    box-sizing: border-box;
+
+    &.layout-single-column {
+      height: auto;
+      min-height: 100vh;
+      min-height: 100dvh;
+      overflow-y: scroll;
+    }
+
+    &.layout-multiple-columns {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+
+  &.player {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    & > div {
+      height: 100%;
+    }
+
+    .video-player video {
+      width: 100%;
+      height: 100%;
+      max-height: 100vh;
+    }
+
+    .media-gallery {
+      margin-top: 0;
+      height: 100% !important;
+      border-radius: 0;
+    }
+
+    .media-gallery__item {
+      border-radius: 0;
+    }
+  }
+
+  &.embed {
+    margin: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+  }
+
+  &.admin {
+    padding: 0;
+    background: var(--color-bg-primary);
+  }
+
+  &.error {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .dialog {
+      vertical-align: middle;
+      margin: 20px;
+
+      &__illustration {
+        img {
+          display: block;
+          max-width: 470px;
+          width: 100%;
+          height: auto;
+          margin-top: -120px;
+          margin-bottom: -45px;
+        }
+      }
+
+      h1 {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+a {
+  &:focus {
+    border-radius: 4px;
+    outline: var(--outline-focus-default);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+.app-holder {
+  &,
+  & > div,
+  & > noscript {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    outline: 0 !important;
+  }
+
+  & > noscript {
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+}
+
+.layout-single-column .app-holder {
+  &,
+  & > div {
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+}
+
+.layout-multiple-columns .app-holder {
+  &,
+  & > div {
+    height: 100%;
+  }
+}
+
+.error-boundary,
+.app-holder noscript {
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: var(--color-text-error);
+  text-align: center;
+
+  & > div {
+    max-width: 500px;
+  }
+
+  p {
+    margin-bottom: 0.85em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--color-text-brand);
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  &__footer {
+    color: var(--color-text-secondary);
+    font-size: 13px;
+
+    a {
+      color: var(--color-text-secondary);
+    }
+  }
+
+  button {
+    display: inline;
+    border: 0;
+    background: transparent;
+    color: var(--color-text-secondary);
+    font: inherit;
+    padding: 0;
+    margin: 0;
+    line-height: inherit;
+    cursor: pointer;
+    outline: 0;
+    transition: color 300ms linear;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+
+    &.copied {
+      color: var(--mas-status-success-color);
+      transition: none;
+    }
+  }
+}
+
+.logo-resources {
+  // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
+  visibility: hidden;
+  user-select: none;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: -1000;
+}
+
+// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,
+// to set the z-index to a high value, which messes with modals and dropdowns.
+// Blocked elements can in theory only be media and frames/embeds, so they
+// should only appear in statuses, under divs and articles.
+body,
+div,
+article {
+  .__ns__pop2top {
+    z-index: unset !important;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/branding.scss b/app/javascript/styles_new/mastodon/branding.scss
new file mode 100644
index 00000000000..a7cc9c500e2
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/branding.scss
@@ -0,0 +1,5 @@
+@use 'variables' as *;
+
+.logo {
+  color: var(--color-text-primary);
+}
diff --git a/app/javascript/styles_new/mastodon/components.scss b/app/javascript/styles_new/mastodon/components.scss
new file mode 100644
index 00000000000..970e3d128f2
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/components.scss
@@ -0,0 +1,11433 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.app-body {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+.animated-number {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+  position: relative;
+}
+
+.inline-alert {
+  color: var(--color-text-success);
+  font-weight: 400;
+
+  .no-reduce-motion & {
+    transition: opacity 200ms ease;
+  }
+}
+
+.link-button {
+  display: block;
+  font-size: 15px;
+  line-height: 20px;
+  color: var(--color-text-brand);
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: none;
+
+  &--destructive {
+    color: var(--color-text-error);
+  }
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    color: var(--color-text-primary);
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+  }
+}
+
+.help-button {
+  color: var(--color-text-on-brand-base);
+  background: var(--color-bg-brand-base);
+  border: 0;
+  border-radius: 20px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background: var(--color-bg-brand-base-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+  }
+
+  .icon {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.button {
+  background-color: var(--color-bg-brand-base);
+  border: 10px none;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--color-text-on-brand-base);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 22px;
+  overflow: hidden;
+  padding: 7px 18px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: auto;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: var(--color-bg-brand-base-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-bg-brand-base);
+    outline-offset: 2px;
+  }
+
+  &--compact {
+    font-size: 14px;
+    line-height: normal;
+    font-weight: 700;
+    padding: 5px 12px;
+    border-radius: 4px;
+  }
+
+  &--dangerous {
+    background-color: var(--color-bg-error-base);
+    color: var(--color-text-on-error-base);
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: var(--color-bg-error-base-hover);
+      transition: none;
+    }
+  }
+
+  &--destructive {
+    &:active,
+    &:focus,
+    &:hover {
+      color: var(--color-text-on-error-base);
+      background-color: var(--color-bg-error-base);
+      transition: none;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    color: var(--color-text-on-disabled);
+    background-color: var(--color-bg-disabled);
+    cursor: not-allowed;
+  }
+
+  &.copyable {
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    color: var(--color-text-on-success-base);
+    background-color: var(--color-bg-success-base);
+    transition: none;
+  }
+
+  &.button-secondary {
+    color: var(--color-text-brand);
+    background: transparent;
+    padding: 6px 17px;
+    border: 1px solid var(--color-text-brand);
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: var(--color-text-brand);
+      color: var(--color-text-brand);
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    &.button--destructive {
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: var(--color-text-error);
+        color: var(--color-text-error);
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      border-color: var(--color-text-disabled);
+      color: var(--color-text-disabled);
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: var(--color-text-disabled);
+        color: var(--color-text-disabled);
+      }
+    }
+  }
+
+  &.button--plain {
+    color: var(--color-text-brand);
+    background: transparent;
+    padding: 6px;
+
+    // The button has no outline, so we use negative margin to
+    // visually align its label with its surroundings while maintaining
+    // a generous click target
+    margin-inline: -6px;
+    border: 1px solid transparent;
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: transparent;
+      color: var(--color-text-brand-soft);
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.7;
+      border-color: transparent;
+      color: var(--color-text-disabled);
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: transparent;
+        color: var(--color-text-disabled);
+      }
+    }
+  }
+
+  &.button--block {
+    width: 100%;
+  }
+
+  &.loading {
+    cursor: wait;
+
+    .button__label-wrapper {
+      // Hide the label only visually, so that
+      // it keeps its layout and accessibility
+      opacity: 0;
+    }
+
+    .loading-indicator {
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  .icon {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.column__wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  position: relative;
+}
+
+.icon {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  aspect-ratio: 1;
+
+  path {
+    fill: currentColor;
+  }
+}
+
+.icon-button {
+  --default-icon-color: var(--color-text-secondary);
+  --default-bg-color: transparent;
+  --hover-icon-color: var(--color-text-primary);
+  --hover-bg-color: var(--color-bg-brand-softer);
+
+  display: inline-flex;
+  color: var(--default-icon-color);
+  border: 0;
+  padding: 0;
+  border-radius: 4px;
+  background: var(--default-bg-color);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  gap: 4px;
+  flex: 0 0 auto;
+
+  a {
+    display: flex;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    color: var(--hover-icon-color);
+    background-color: var(--hover-bg-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-text-brand);
+  }
+
+  &.disabled {
+    color: var(--color-text-disabled);
+    background-color: var(--default-bg-color);
+    cursor: default;
+  }
+
+  &.inverted {
+    --default-icon-color: var(--color-text-primary);
+    --hover-icon-color: var(--color-text-secondary);
+  }
+
+  &.active {
+    --default-icon-color: var(--color-text-brand);
+    --hover-icon-color: var(--color-text-brand);
+    --hover-bg-color: transparent;
+  }
+
+  &.overlayed {
+    --default-icon-color: rgb(from var(--color-text-on-media) r g b / 70%);
+    --default-bg-color: var(--color-bg-media);
+    --hover-icon-color: var(--color-text-brand);
+    --hover-bg-color: rgb(from var(--color-bg-media-base) r g b / 90%);
+
+    box-sizing: content-box;
+    backdrop-filter: $backdrop-blur-filter;
+    border-radius: 4px;
+    padding: 2px;
+  }
+
+  &--with-counter {
+    padding-inline-end: 4px;
+  }
+
+  &__counter {
+    display: block;
+    width: auto;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  &.copyable {
+    transition: all 300ms linear;
+  }
+
+  &.copied {
+    color: var(--color-text-success);
+    transition: none;
+    background-color: var(--color-bg-success-softer);
+    border-color: var(--color-border-on-bg-brand-softer);
+  }
+}
+
+body > [data-popper-placement] {
+  z-index: 9999;
+}
+
+.invisible {
+  font-size: 0;
+  line-height: 0;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  position: absolute;
+
+  img,
+  svg {
+    margin: 0 !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+}
+
+.ellipsis {
+  &::after {
+    content: '…';
+  }
+}
+
+.autosuggest-textarea {
+  &__textarea {
+    background: transparent;
+    min-height: 100px;
+    padding-bottom: 0;
+    resize: none;
+    scrollbar-color: initial;
+
+    &::-webkit-scrollbar {
+      all: unset;
+    }
+  }
+
+  &__suggestions {
+    box-shadow: var(--dropdown-shadow);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0 0 4px 4px;
+    color: var(--color-text-primary);
+    font-size: 14px;
+    padding: 0;
+
+    &__item {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      height: 48px;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: var(--color-text-primary);
+
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: var(--color-bg-secondary);
+
+        .autosuggest-account .display-name__account {
+          color: inherit;
+        }
+      }
+
+      &.selected {
+        color: var(--color-text-on-brand-base);
+        background: var(--color-bg-brand-base);
+
+        .autosuggest-account .display-name__account {
+          color: inherit;
+        }
+      }
+    }
+  }
+}
+
+.autosuggest-account,
+.autosuggest-emoji,
+.autosuggest-hashtag {
+  flex: 1 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 8px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autosuggest-account {
+  .display-name {
+    font-weight: 400;
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+
+  .display-name__account {
+    display: block;
+    line-height: 16px;
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.autosuggest-hashtag {
+  justify-content: space-between;
+
+  &__name {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__uses {
+    flex: 0 0 auto;
+    text-align: end;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.autosuggest-emoji {
+  &__name {
+    flex: 1 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.autosuggest-account .account__avatar,
+.autosuggest-emoji img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.compose-form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  .layout-multiple-columns &,
+  .column & {
+    padding: 15px;
+  }
+
+  &__highlightable {
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
+    border-radius: 4px;
+    border: 1px solid var(--color-border-on-bg-secondary);
+    transition: border-color 300ms linear;
+    position: relative;
+    background: var(--color-bg-secondary);
+
+    &.active {
+      transition: none;
+      border-color: var(--color-text-brand);
+    }
+  }
+
+  &__warning {
+    color: var(--color-text-primary);
+    background: var(--color-bg-warning-softer);
+    border: 1px solid var(--color-border-on-bg-warning-softer);
+    padding: 8px 10px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 400;
+
+    strong {
+      font-weight: 500;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          font-weight: 700;
+        }
+      }
+    }
+
+    a {
+      color: var(--color-text-brand);
+      font-weight: 500;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .spoiler-input {
+    display: flex;
+    align-items: stretch;
+
+    &__border {
+      background: url('@/images/warning-stripes.svg') repeat-y;
+      width: 5px;
+      flex: 0 0 auto;
+    }
+
+    .autosuggest-input {
+      flex: 1 1 auto;
+      border: 1px solid var(--color-border-primary);
+      border-width: 1px 0;
+    }
+  }
+
+  .autosuggest-textarea__textarea,
+  .spoiler-input__input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    color: var(--color-text-primary);
+    background: transparent;
+    font-family: inherit;
+    font-size: 14px;
+    padding: 12px;
+    line-height: normal;
+    border: 0;
+    outline: 0;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .spoiler-input__input {
+    padding: 12px 12px - 5px;
+    background: var(--color-bg-brand-softer);
+    color: var(--color-text-brand);
+  }
+
+  &__dropdowns {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 8px;
+    flex-wrap: wrap;
+
+    & > div {
+      overflow: hidden;
+      display: flex;
+    }
+  }
+
+  &__uploads {
+    padding: 0 12px;
+    aspect-ratio: 3/2;
+    flex-shrink: 0;
+  }
+
+  .media-gallery {
+    gap: 8px;
+  }
+
+  &__upload {
+    position: relative;
+
+    &.draggable {
+      will-change: transform, opacity;
+      touch-action: none;
+      cursor: grab;
+    }
+
+    &.dragging {
+      opacity: 0;
+    }
+
+    &.overlay {
+      height: 100%;
+      border-radius: 8px;
+      pointer-events: none;
+    }
+
+    &__actions {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 8px;
+    }
+
+    &__preview,
+    &__visualizer {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      top: 0;
+    }
+
+    &__preview {
+      border-radius: 6px;
+      inset-inline-start: 0;
+    }
+
+    &__visualizer {
+      padding: 16px;
+      box-sizing: border-box;
+
+      .audio-player__visualizer {
+        margin: 0 auto;
+        display: block;
+        height: 100%;
+      }
+
+      .icon {
+        position: absolute;
+        top: 50%;
+        inset-inline-start: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.75;
+        color: var(--player-foreground-color);
+        filter: var(--overlay-icon-shadow);
+        width: 48px;
+        height: 48px;
+      }
+    }
+
+    &__thumbnail {
+      width: 100%;
+      height: 100%;
+      background-position: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      overflow: hidden;
+    }
+
+    .icon-button {
+      flex: 0 0 auto;
+      color: var(--color-text-on-media);
+      background: var(--color-bg-media);
+      backdrop-filter: $backdrop-blur-filter;
+      border-radius: 6px;
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 500;
+      padding: 4px 8px;
+      font-family: inherit;
+
+      .icon {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .icon-button.compose-form__upload__delete {
+      padding: 2px;
+      border-radius: 50%;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &__warning {
+      position: absolute;
+      z-index: 2;
+      bottom: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      padding: 8px;
+
+      .icon-button.active {
+        color: var(--color-text-on-warning-base);
+        background: var(--color-bg-warning-base);
+      }
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  &__submit {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  &__buttons {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex: 1 1 auto;
+
+    & > div {
+      display: flex;
+    }
+
+    .icon-button {
+      padding: 2px;
+    }
+
+    .icon-button .icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 12px;
+    flex-wrap: wrap;
+
+    .icon-button {
+      box-sizing: content-box;
+      color: var(--color-text-brand);
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--color-text-brand);
+      }
+
+      &.disabled {
+        color: var(--color-text-disabled);
+      }
+
+      &.active {
+        background: var(--color-bg-brand-base);
+        color: var(--color-text-on-brand-base);
+      }
+    }
+  }
+
+  &__poll {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 8px;
+
+    .poll__option {
+      padding: 0 12px;
+      gap: 8px;
+
+      &.empty:not(:focus-within) {
+        opacity: 0.5;
+      }
+    }
+
+    .poll__input {
+      width: 17px;
+      height: 17px;
+      border-color: var(--color-text-secondary);
+    }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding-inline-start: 37px;
+      padding-inline-end: 40px;
+
+      &__sep {
+        width: 1px;
+        height: 22px;
+        background: var(--color-border-primary);
+        flex: 0 0 auto;
+      }
+    }
+
+    &__select {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1 1 auto;
+      min-width: 0;
+
+      &__label {
+        flex: 0 0 auto;
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: var(--color-text-secondary);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      &__value {
+        flex: 0 0 auto;
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        letter-spacing: 0.1px;
+        color: var(--color-text-brand);
+        background-color: var(--color-bg-secondary-solid);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .status__quote {
+    margin: 0 8px;
+    max-height: 220px;
+
+    // Override .status__content .status__content__text.status__content__text--visible
+    .status__content__text.status__content__text {
+      display: -webkit-box;
+    }
+
+    .status__content__text {
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+}
+
+.dropdown-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-text-brand);
+  background: transparent;
+  border: 1px solid var(--color-text-brand);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 13px;
+  line-height: normal;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[disabled] {
+    cursor: default;
+    color: var(--color-text-disabled);
+    border-color: var(--color-text-disabled);
+  }
+
+  .icon {
+    width: 15px;
+    height: 15px;
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 auto;
+  }
+
+  &.active {
+    color: var(--color-text-on-brand-base);
+    border-color: var(--color-bg-brand-base);
+    background: var(--color-bg-brand-base);
+  }
+
+  &.warning {
+    color: var(--color-text-warning);
+    border-color: var(--color-text-warning);
+
+    &.active {
+      color: var(--color-text-on-warning-base);
+      border-color: var(--color-bg-warning-base);
+      background-color: var(--color-bg-warning-base);
+    }
+  }
+}
+
+.character-counter {
+  cursor: default;
+  font-family: $font-sans-serif, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  color: var(--color-text-secondary);
+  flex: 1 0 auto;
+  text-align: end;
+
+  &.character-counter--over {
+    color: var(--color-text-error);
+  }
+}
+
+.no-reduce-motion .spoiler-input {
+  transition:
+    height 0.4s ease,
+    opacity 0.4s ease;
+}
+
+.sign-in-banner {
+  padding: 10px;
+
+  p {
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--color-text-primary);
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 700;
+    }
+
+    a {
+      color: var(--color-text-primary);
+      text-decoration: none;
+      unicode-bidi: isolate;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .button {
+    margin-bottom: 10px;
+  }
+}
+
+.emojione {
+  font-size: inherit;
+  vertical-align: middle;
+  object-fit: contain;
+  margin: -0.2ex 0.15em 0.2ex;
+  width: 16px;
+  height: 16px;
+
+  img {
+    width: auto;
+  }
+}
+
+.status__content--with-action {
+  cursor: pointer;
+}
+
+.status__content {
+  clear: both;
+}
+
+.status__content,
+.edit-indicator__content,
+.reply-indicator__content {
+  position: relative;
+  overflow-wrap: break-word;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  line-height: 22px;
+  padding-top: 2px;
+  color: var(--color-text-primary);
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.status__content--with-spoiler {
+    white-space: normal;
+
+    .status__content__text {
+      white-space: pre-wrap;
+    }
+  }
+
+  .emojione {
+    width: 20px;
+    height: 20px;
+    margin: -3px 0 0;
+  }
+
+  p {
+    margin-bottom: 22px;
+    white-space: pre-wrap;
+    unicode-bidi: plaintext;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--color-text-status-links);
+    text-decoration: none;
+    unicode-bidi: isolate;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  a.unhandled-link {
+    color: var(--color-text-brand);
+  }
+
+  .status__content__text {
+    display: none;
+
+    &.status__content__text--visible {
+      display: block;
+    }
+  }
+}
+
+.reply-indicator {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  grid-template-rows: 46px max-content;
+  gap: 0 10px;
+
+  .detailed-status__display-name {
+    margin-bottom: 4px;
+  }
+
+  .detailed-status__display-avatar {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 1;
+  }
+
+  &__main {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    grid-row-end: span 2;
+  }
+
+  .display-name {
+    font-size: 14px;
+    line-height: 16px;
+
+    &__account {
+      display: none;
+    }
+  }
+
+  &__line {
+    grid-column-start: 1;
+    grid-row-start: 2;
+    grid-row-end: span 1;
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      inset-inline-start: 50%;
+      top: 4px;
+      transform: translateX(-50%);
+      background: var(--color-border-primary);
+      width: 2px;
+      height: calc(100% + 32px - 8px); // Account for gap to next element
+    }
+  }
+
+  &__content {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    display: -webkit-box;
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    padding: 0;
+    max-height: 4 * 20px;
+    overflow: hidden;
+    color: var(--color-text-secondary);
+  }
+
+  &__attachments {
+    margin-top: 4px;
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.edit-indicator {
+  border-radius: 4px 4px 0 0;
+  background: var(--color-bg-tertiary);
+  padding: 12px;
+  overflow-y: auto;
+  flex: 0 0 auto;
+  border-bottom: 1px solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__cancel {
+    display: flex;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &__display-name {
+    display: flex;
+    gap: 4px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__content {
+    color: var(--color-text-primary);
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    padding-top: 0 !important;
+    display: -webkit-box;
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    max-height: 4 * 20px;
+    overflow: hidden;
+
+    a {
+      color: var(--color-text-brand);
+    }
+  }
+
+  &__attachments {
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    line-height: 16px;
+    opacity: 0.75;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.edit-indicator__content,
+.reply-indicator__content {
+  .emojione {
+    width: 18px;
+    height: 18px;
+    margin: -3px 0 0;
+  }
+}
+
+.announcements__content {
+  overflow-wrap: break-word;
+  overflow-y: auto;
+
+  .emojione {
+    width: 20px;
+    height: 20px;
+    margin: -3px 0 0;
+  }
+
+  p {
+    margin-bottom: 10px;
+    white-space: pre-wrap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--color-text-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &.unhandled-link {
+      color: var(--color-text-brand);
+    }
+  }
+}
+
+.status__content.status__content--collapsed {
+  max-height: 22px * 15; // 15 lines is roughly above 500 characters
+}
+
+.status__content__read-more-button,
+.status__content__translate-button {
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  line-height: 22px;
+  color: var(--color-text-brand);
+  border: 0;
+  background: transparent;
+  padding: 0;
+  margin-top: 16px;
+  text-decoration: none;
+  text-wrap: nowrap;
+
+  .status--is-quote & {
+    // Needed to prevent buttons from stretching across whole
+    // status width in Safari due to line-clamp
+    width: min-content;
+    white-space: nowrap;
+  }
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+
+  .icon {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+.translate-button {
+  margin-top: 16px;
+  font-size: 15px;
+  line-height: 22px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--color-text-tertiary);
+}
+
+.status__wrapper--filtered {
+  color: var(--color-text-tertiary);
+  border: 0;
+  font-size: inherit;
+  text-align: center;
+  line-height: inherit;
+  margin: 0;
+  padding: 15px;
+  box-sizing: border-box;
+  width: 100%;
+  clear: both;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &__button {
+    display: inline;
+    color: var(--color-text-brand);
+    border: 0;
+    background: transparent;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+.focusable {
+  &:focus-visible {
+    outline: 2px solid var(--color-text-brand);
+    outline-offset: -2px;
+    background: var(--color-bg-brand-softer);
+  }
+}
+
+.status {
+  padding: 16px;
+  min-height: 54px;
+  border-bottom: 1px solid var(--color-border-primary);
+  cursor: auto;
+  opacity: 1;
+  animation: fade 150ms linear;
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .content-warning {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .media-gallery,
+  .video-player,
+  .audio-player,
+  .attachment-list {
+    margin-top: 16px;
+  }
+
+  &--in-thread {
+    --thread-margin: calc(46px + 8px);
+
+    border-bottom: 0;
+
+    & > .status__content,
+    & > .status__action-bar,
+    & > .media-gallery,
+    & > div > .video-player,
+    & > .audio-player,
+    & > .attachment-list,
+    & > .picture-in-picture-placeholder,
+    & > .more-from-author,
+    & > .status-card,
+    & > .hashtag-bar,
+    & > .content-warning,
+    & > .filter-warning,
+    & > .status__quote {
+      margin-inline-start: var(--thread-margin);
+      width: calc(100% - var(--thread-margin));
+    }
+
+    .more-from-author {
+      width: calc(100% - var(--thread-margin) + 2px);
+    }
+
+    .status__content__read-more-button {
+      margin-inline-start: var(--thread-margin);
+    }
+  }
+
+  &__action-bar__button-wrapper {
+    flex-basis: 0;
+    flex-grow: 1;
+
+    &:last-child {
+      flex-grow: 0;
+    }
+  }
+
+  &--first-in-thread {
+    border-top: 1px solid var(--color-border-primary);
+  }
+
+  &__line {
+    --thread-line-color: var(--color-border-primary);
+
+    height: 16px - 4px;
+    border-inline-start: 2px solid var(--thread-line-color);
+    width: 0;
+    position: absolute;
+    top: 0;
+    inset-inline-start: 16px + ((46px - 2px) * 0.5);
+
+    &--full {
+      top: 0;
+      height: 100%;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 16px - 4px;
+        height: 46px + 4px + 4px;
+        width: 2px;
+        background: var(--thread-line-color);
+        inset-inline-start: -2px;
+      }
+    }
+
+    &--first {
+      top: 16px + 46px + 4px;
+      height: calc(100% - (16px + 46px + 4px));
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .no-reduce-motion &--highlighted-entry::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--color-bg-brand-softer);
+    opacity: 0;
+    animation: fade 0.7s reverse both 0.3s;
+    pointer-events: none;
+  }
+}
+
+.status__relative-time {
+  display: block;
+  font-size: 15px;
+  line-height: 22px;
+  height: 40px;
+  order: 2;
+  flex: 0 0 auto;
+  color: var(--color-text-secondary);
+}
+
+.notification__relative_time {
+  color: var(--color-text-tertiary);
+  float: right;
+  font-size: 14px;
+  padding-bottom: 1px;
+}
+
+.status__visibility-icon {
+  padding: 0 4px;
+
+  .icon {
+    width: 1em;
+    height: 1em;
+    margin-bottom: -2px;
+  }
+}
+
+.status__display-name {
+  color: var(--color-text-secondary);
+}
+
+.status__info .status__display-name {
+  max-width: 100%;
+  display: flex;
+  font-size: 15px;
+  line-height: 22px;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+  margin-inline-end: auto;
+
+  .display-name {
+    bdi {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__account {
+      white-space: nowrap;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.status__quote-cancel {
+  align-self: self-start;
+  order: 5;
+}
+
+.status__info {
+  font-size: 15px;
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.status-check-box__status {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 10px;
+
+  .detailed-status__display-name {
+    color: var(--color-text-tertiary);
+
+    span {
+      display: inline;
+    }
+
+    &:hover strong {
+      text-decoration: none;
+    }
+  }
+
+  .media-gallery,
+  .audio-player,
+  .video-player {
+    margin-top: 15px;
+    max-width: 250px;
+  }
+
+  .status__content {
+    padding: 0;
+    white-space: normal;
+  }
+
+  .media-gallery__item-thumbnail {
+    cursor: default;
+  }
+}
+
+.status__prepend {
+  padding: 16px;
+  padding-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.status__wrapper-direct,
+.notification-ungrouped--direct,
+.notification-group--direct,
+.notification-group--annual-report {
+  background: var(--color-bg-brand-softer);
+
+  &:focus {
+    background: var(--color-bg-brand-soft);
+  }
+}
+
+.status__wrapper-direct,
+.notification-ungrouped--direct {
+  .status__prepend,
+  .notification-ungrouped__header {
+    color: var(--color-text-brand);
+  }
+}
+
+.status__action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
+  margin-top: 16px;
+}
+
+.detailed-status__action-bar-dropdown {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.detailed-status {
+  padding: 16px;
+  border-top: 1px solid var(--color-border-primary);
+
+  .status__content {
+    font-size: 19px;
+    line-height: 24px;
+
+    .emojione {
+      width: 24px;
+      height: 24px;
+      margin: -1px 0 0;
+    }
+  }
+
+  .media-gallery,
+  .video-player,
+  .audio-player {
+    margin-top: 16px;
+  }
+
+  .status__prepend {
+    padding: 0;
+    margin-bottom: 16px;
+  }
+
+  .content-warning {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .logo {
+    width: 40px;
+    height: 40px;
+    color: var(--color-text-tertiary);
+  }
+}
+
+.embed {
+  position: relative;
+
+  &__overlay {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .detailed-status {
+    border-top: 0;
+  }
+}
+
+.scrollable > div:first-child .detailed-status {
+  border-top: 0;
+}
+
+.detailed-status__meta {
+  margin-top: 24px;
+  color: var(--color-text-tertiary);
+  font-size: 14px;
+  line-height: 18px;
+
+  &__line {
+    border-bottom: 1px solid var(--color-border-primary);
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+
+  .icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .animated-number {
+    color: var(--color-text-primary);
+    font-weight: 500;
+  }
+}
+
+.detailed-status__action-bar {
+  border-top: 1px solid var(--color-border-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+}
+
+.detailed-status__wrapper-direct {
+  .detailed-status,
+  .detailed-status__action-bar {
+    background: var(--color-bg-brand-softer);
+  }
+
+  .status__prepend {
+    color: var(--color-text-brand);
+  }
+}
+
+.status__quote {
+  // --status-gutter-width is currently only set inside of
+  // .notification-ungrouped, so everywhere else this will fall back
+  // to the pixel values
+  --quote-margin: var(--status-gutter-width);
+
+  position: relative;
+  overflow: hidden;
+  margin-block-start: 16px;
+  margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px));
+  border-radius: 12px;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-primary);
+}
+
+.status__quote--error {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  min-height: 56px;
+
+  .link-button {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+}
+
+.status__quote-author-button {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  margin-top: 8px;
+  padding: 8px 12px;
+  align-items: center;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-brand-softer);
+  border-radius: 8px;
+  cursor: default;
+}
+
+.status--is-quote {
+  border: none;
+  padding: 12px;
+
+  .status__info {
+    padding-bottom: 8px;
+  }
+
+  .display-name,
+  .status__relative-time {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+  }
+
+  .display-name__account {
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+  }
+
+  .status__content {
+    display: -webkit-box;
+    font-size: 14px;
+    letter-spacing: 0.25px;
+    line-height: 20px;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    p {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .media-gallery,
+  .video-player,
+  .audio-player,
+  .attachment-list,
+  .poll {
+    margin-top: 8px;
+  }
+}
+
+.detailed-status__link {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+  gap: 6px;
+}
+
+.domain {
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &__domain-name {
+    flex: 1 1 auto;
+    color: var(--color-text-primary);
+    font-size: 15px;
+    line-height: 21px;
+    font-weight: 500;
+  }
+}
+
+.account {
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  .account__display-name {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-decoration: none;
+    font-size: 14px;
+
+    .display-name {
+      margin-bottom: 4px;
+    }
+
+    .display-name strong {
+      display: inline;
+      color: var(--color-text-primary);
+    }
+  }
+
+  &--minimal {
+    .account__display-name {
+      .display-name {
+        margin-bottom: 0;
+      }
+
+      .display-name strong {
+        display: block;
+      }
+    }
+  }
+
+  &__avatar-wrapper .account__avatar {
+    @container (width < 360px) {
+      width: 35px !important;
+      height: 35px !important;
+    }
+  }
+
+  &__domain-pill {
+    display: inline-flex;
+    background: var(--color-bg-brand-softer);
+    border-radius: 4px;
+    border: 0;
+    color: var(--color-text-brand);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    padding: 4px 8px;
+
+    &.active {
+      color: var(--color-text-on-brand-base);
+      background: var(--color-bg-brand-base);
+    }
+
+    &__popout {
+      background: var(--color-bg-elevated);
+      backdrop-filter: $backdrop-blur-filter;
+      border: 1px solid var(--color-border-primary);
+      box-shadow: var(--dropdown-shadow);
+      max-width: 320px;
+      padding: 16px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--color-text-secondary);
+
+      .link-button {
+        display: inline;
+        font-size: inherit;
+        line-height: inherit;
+      }
+
+      &__header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        &__icon {
+          width: 40px;
+          height: 40px;
+          color: var(--color-text-on-brand-base);
+          background: var(--color-bg-brand-base);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+
+        h3 {
+          font-size: 17px;
+          line-height: 22px;
+          color: var(--color-text-primary);
+        }
+      }
+
+      &__handle {
+        border: 2px dashed var(--color-border-on-brand-softer);
+        background: var(--color-bg-brand-softer);
+        padding: 12px 8px;
+        color: var(--color-text-brand);
+        border-radius: 4px;
+
+        &__label {
+          font-size: 11px;
+          line-height: 16px;
+          font-weight: 500;
+        }
+
+        &__handle {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          user-select: all;
+        }
+      }
+
+      &__parts {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        font-size: 12px;
+        line-height: 16px;
+
+        & > div {
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
+        }
+
+        &__icon {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          color: var(--color-text-brand);
+        }
+
+        h6 {
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 500;
+          color: var(--color-text-primary);
+        }
+      }
+    }
+  }
+
+  &__note {
+    font-size: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    margin-top: 10px;
+    color: var(--color-text-secondary);
+
+    &--missing {
+      color: var(--color-text-tertiary);
+    }
+
+    p {
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: inherit;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.learn-more__popout {
+  gap: 8px;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  h6 {
+    font-size: inherit;
+    font-weight: 500;
+    line-height: inherit;
+    letter-spacing: 0.1px;
+  }
+
+  .link-button {
+    font-weight: 500;
+  }
+}
+
+.account__wrapper {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: end;
+}
+
+.account__wrapper--with-bio {
+  align-items: start;
+}
+
+.account__info-wrapper {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.account__avatar {
+  display: block;
+  position: relative;
+  border-radius: var(--avatar-border-radius);
+  background: var(--color-bg-tertiary);
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--avatar-border-radius);
+    display: inline-block; // to not show broken images
+  }
+
+  &--loading {
+    background-color: var(--color-bg-tertiary);
+  }
+
+  &--inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-inline-end: 5px;
+  }
+
+  &-composite {
+    border-radius: 50%;
+    overflow: hidden;
+    position: relative;
+
+    & > div {
+      float: left;
+      position: relative;
+      box-sizing: border-box;
+    }
+
+    .account__avatar {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    &__label {
+      display: block;
+      position: absolute;
+      top: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--color-text-primary);
+      text-shadow: 1px 1px 2px
+        rgb(from var(--color-shadow-primary) r g b / 100%);
+      font-weight: 700;
+      font-size: 15px;
+    }
+  }
+
+  &__counter {
+    $height: 16px;
+    $h-padding: 5px;
+
+    position: absolute;
+    bottom: -3px;
+    inset-inline-end: -3px;
+    padding-left: $h-padding;
+    padding-right: $h-padding;
+    height: $height;
+    border-radius: $height;
+    min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
+    line-height: $height + 1px; // to visually center the numbers
+    color: var(--color-text-on-brand-base);
+    background: var(--color-bg-brand-base);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--color-bg-primary);
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+  }
+}
+
+a .account__avatar {
+  cursor: pointer;
+}
+
+.avatar-group {
+  display: flex;
+
+  --avatar-height: 28px;
+
+  &:not(.avatar-group--compact) {
+    gap: 8px;
+    flex-wrap: wrap;
+    height: var(--avatar-height);
+    overflow-y: clip;
+  }
+}
+
+.avatar-group--compact {
+  & > :not(:first-child) {
+    margin-inline-start: -12px;
+  }
+
+  & > :first-child {
+    transform: rotate(-4deg);
+  }
+
+  & > :nth-child(2) {
+    transform: rotate(-2deg);
+  }
+
+  .account__avatar {
+    box-shadow: 0 0 0 2px var(--color-bg-primary);
+  }
+}
+
+.account__avatar-overlay {
+  position: relative;
+
+  &-overlay {
+    position: absolute;
+    bottom: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+  }
+}
+
+.account__relationship {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.account__relationship,
+.explore-suggestions-card {
+  .icon-button {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    box-sizing: content-box;
+    padding: 5px;
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.account-authorize {
+  padding: 14px 10px;
+
+  .detailed-status__display-name {
+    display: block;
+    margin-bottom: 15px;
+    overflow: hidden;
+  }
+}
+
+.account-authorize__avatar {
+  float: left;
+  margin-inline-end: 10px;
+}
+
+.status__display-name,
+.status__relative-time,
+.detailed-status__display-name,
+.detailed-status__datetime,
+.detailed-status__application,
+.detailed-status__link,
+.account__display-name {
+  text-decoration: none;
+}
+
+.status__display-name,
+.account__display-name {
+  .display-name strong {
+    color: var(--color-text-primary);
+  }
+}
+
+.muted {
+  .emojione {
+    opacity: 0.5;
+  }
+}
+
+.status__display-name,
+.detailed-status__display-name,
+a.account__display-name {
+  &:hover .display-name strong {
+    text-decoration: underline;
+  }
+}
+
+.account__display-name .display-name strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detailed-status__application,
+.detailed-status__datetime,
+.detailed-status__link {
+  color: inherit;
+}
+
+.detailed-status__display-name {
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 15px;
+  line-height: 22px;
+  margin-bottom: 16px;
+  overflow: hidden;
+
+  strong,
+  span {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  strong {
+    color: var(--color-text-primary);
+  }
+}
+
+.muted {
+  .status__content,
+  .status__content p,
+  .status__content a {
+    color: var(--color-text-tertiary);
+  }
+
+  .status__display-name strong {
+    color: var(--color-text-tertiary);
+  }
+
+  .status__avatar {
+    opacity: 0.5;
+  }
+}
+
+.notification__report {
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border-primary);
+  display: flex;
+  gap: 10px;
+
+  &__avatar {
+    flex: 0 0 auto;
+  }
+
+  &__details {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--color-text-secondary);
+    gap: 10px;
+    font-size: 15px;
+    line-height: 22px;
+    white-space: nowrap;
+    overflow: hidden;
+
+    & > div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+  }
+}
+
+.notification-group--link {
+  color: var(--color-text-primary);
+  text-decoration: none;
+
+  .notification-group__main {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    flex-grow: 1;
+    font-size: 15px;
+    line-height: 22px;
+
+    strong,
+    bdi {
+      font-weight: 700;
+    }
+
+    .link-button {
+      font-size: inherit;
+      line-height: inherit;
+      font-weight: inherit;
+    }
+  }
+}
+
+.notification__message {
+  padding: 16px;
+  padding-bottom: 0;
+  cursor: default;
+  color: var(--color-text-secondary);
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .icon {
+    color: var(--color-text-brand);
+    width: 18px;
+    height: 18px;
+  }
+
+  .icon-star {
+    color: var(--color-text-favourite-highlight);
+  }
+
+  > span {
+    display: inline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.icon-button.star-icon.active {
+  color: var(--color-text-favourite-highlight);
+}
+
+.icon-button.bookmark-icon.active {
+  color: var(--color-text-bookmark-highlight);
+}
+
+.no-reduce-motion .icon-button.star-icon {
+  &.activate {
+    & > .icon {
+      animation: spring-rotate-in 1s linear;
+      transform-origin: 50% 52%;
+    }
+  }
+
+  &.deactivate {
+    & > .icon {
+      animation: spring-rotate-out 1s linear;
+      transform-origin: 50% 52%;
+    }
+  }
+}
+
+.notification__display-name {
+  color: inherit;
+  font-weight: 500;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.display-name {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &__account {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.display-name__html {
+  font-weight: 500;
+}
+
+.status__relative-time,
+.detailed-status__datetime,
+.detailed-status__link {
+  &:is(a):hover {
+    text-decoration: underline;
+  }
+}
+
+.zoomable-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scrollbar-width: none;
+  overflow: hidden;
+  user-select: none;
+
+  img {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    width: auto;
+    height: auto;
+    outline: 1px solid var(--color-border-media);
+    outline-offset: -1px;
+    border-radius: 8px;
+    touch-action: none;
+    user-select: none;
+  }
+
+  &--zoomed-in {
+    z-index: 9999;
+    cursor: grab;
+
+    img {
+      outline: none;
+      border-radius: 0;
+    }
+  }
+
+  &--dragging {
+    cursor: grabbing;
+  }
+
+  &--error img {
+    visibility: hidden;
+  }
+
+  &__preview {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    position: absolute;
+    z-index: 1;
+    outline: 1px solid var(--color-border-media);
+    outline-offset: -1px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: -1;
+    }
+  }
+
+  .loading-indicator {
+    z-index: 2;
+    mix-blend-mode: luminosity;
+  }
+}
+
+.navigation-bar {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: default;
+  gap: 10px;
+
+  .column > & {
+    padding: 15px;
+  }
+
+  .account {
+    border-bottom: 0;
+    padding: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+
+    &__display-name {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 500;
+
+      .display-name__account {
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .icon-button {
+    padding: 8px;
+    color: var(--color-text-primary);
+  }
+
+  .icon-button .icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.dropdown-animation {
+  animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
+
+  @keyframes dropdown {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .reduce-motion & {
+    animation: none;
+  }
+}
+
+.dropdown {
+  display: inline-block;
+}
+
+.dropdown__content {
+  display: none;
+  position: absolute;
+}
+
+.dropdown-menu__separator {
+  border-bottom: 1px solid var(--color-border-primary);
+  margin: 5px 0;
+  height: 0;
+}
+
+.dropdown-menu {
+  background: var(--color-bg-elevated);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 1px solid var(--color-border-primary);
+  padding: 4px;
+  border-radius: 4px;
+  box-shadow: var(--dropdown-shadow);
+  z-index: 9999;
+
+  &__text-button {
+    display: inline-flex;
+    align-items: center;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:focus-visible {
+      outline: 1px dotted;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    .icon {
+      width: 15px;
+      height: 15px;
+    }
+  }
+
+  &__container {
+    &__header {
+      border-bottom: 1px solid var(--color-border-primary);
+      padding: 10px 14px;
+      padding-bottom: 14px;
+      margin-bottom: 4px;
+      font-size: 13px;
+      line-height: 18px;
+      color: var(--color-text-secondary);
+    }
+
+    &__list {
+      list-style: none;
+
+      &--scrollable {
+        max-height: 300px;
+        overflow-y: scroll;
+      }
+    }
+
+    &--loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 30px 45px;
+    }
+  }
+
+  &.left {
+    transform-origin: 100% 50%;
+  }
+
+  &.top {
+    transform-origin: 50% 100%;
+  }
+
+  &.bottom {
+    transform-origin: 50% 0;
+  }
+
+  &.right {
+    transform-origin: 0 50%;
+  }
+}
+
+.dropdown-menu__item {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 500;
+  display: block;
+
+  &--dangerous {
+    color: var(--color-text-error);
+  }
+
+  &--highlighted {
+    color: var(--color-text-brand);
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-subtitle {
+    font-weight: 400;
+  }
+
+  a,
+  button {
+    font: inherit;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: inherit;
+    width: 100%;
+    padding: 10px 14px;
+    border: 0;
+    margin: 0;
+    background: transparent;
+    box-sizing: border-box;
+    text-decoration: none;
+    color: inherit;
+    text-align: inherit;
+    border-radius: 4px;
+
+    &:focus,
+    &:hover,
+    &:active {
+      &:not(:disabled, [aria-disabled='true']) {
+        background: var(--color-bg-secondary);
+        outline: 0;
+      }
+    }
+  }
+
+  button:disabled,
+  button[aria-disabled='true'] {
+    color: var(--color-text-disabled);
+    cursor: default;
+
+    &:focus {
+      color: rgb(from var(--color-text-disabled) r g b / 70%);
+      background: var(--color-bg-disabled);
+      outline: 0;
+    }
+  }
+}
+
+.reblog-menu-item {
+  max-width: 360px;
+}
+
+.inline-account {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+
+  .account__avatar {
+    margin-inline-end: 5px;
+    border-radius: 50%;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+.columns-area {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: relative;
+
+  .layout-multiple-columns & {
+    overflow-x: auto;
+
+    &.unscrollable {
+      overflow-x: hidden;
+    }
+  }
+
+  &__panels {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding-inline: 10px;
+    padding-bottom: env(safe-area-inset-bottom);
+
+    &__pane {
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      justify-content: flex-end;
+      min-width: 285px;
+
+      &--start {
+        justify-content: flex-start;
+      }
+
+      &__inner {
+        position: fixed;
+        width: 285px;
+        height: 100%;
+      }
+    }
+
+    &__main {
+      --column-header-height: 62px;
+
+      box-sizing: border-box;
+      width: 100%;
+      flex: 0 1 auto;
+      display: flex;
+      flex-direction: column;
+      contain: inline-size layout paint style;
+      container: column / inline-size;
+      color: var(--color-text-primary);
+      background-color: var(--color-bg-primary);
+
+      @media screen and (min-width: $no-gap-breakpoint) {
+        max-width: 600px;
+      }
+    }
+  }
+}
+
+.ui__navigation-bar {
+  position: fixed;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 8px;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: var(--color-bg-primary);
+  backdrop-filter: $backdrop-blur-filter;
+  border-top: 1px solid var(--color-border-primary);
+  box-sizing: border-box;
+
+  .layout-multiple-columns & {
+    display: none;
+  }
+
+  &__items {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    padding: 0 16px;
+
+    &.active {
+      flex: 1;
+      padding: 0;
+    }
+  }
+
+  &__sign-up {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding-inline-start: 16px;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: transparent;
+    border: none;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    padding-top: 11px;
+    padding-bottom: 15px;
+    border-top: 4px solid transparent;
+    text-decoration: none;
+    color: inherit;
+
+    &.active {
+      color: var(--color-text-brand);
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    &:focus-visible {
+      border-top-color: var(--color-text-brand);
+      border-radius: 0;
+    }
+  }
+}
+
+.tabs-bar__wrapper {
+  background: var(--color-bg-primary);
+  backdrop-filter: $backdrop-blur-filter;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-top: 0;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-top: 10px solid var(--color-bg-ambient);
+  }
+}
+
+.react-swipeable-view-container {
+  &,
+  .columns-area,
+  .drawer,
+  .column {
+    height: 100%;
+  }
+}
+
+.react-swipeable-view-container > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.column {
+  width: clamp(380px, calc((100% - 350px) / 4), 400px);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  > .scrollable {
+    border: 1px solid var(--color-border-primary);
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
+
+    &.about,
+    &.privacy-policy {
+      border-top: 1px solid var(--color-border-primary);
+      border-radius: 4px;
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        border-top: 0;
+        border-bottom: 0;
+      }
+    }
+  }
+}
+
+.column__alert {
+  --alert-height: 54px;
+
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: minmax(var(--alert-height), max-content);
+  align-items: end;
+  width: 100%;
+  max-width: 360px;
+  padding: 1rem;
+  margin: auto auto 0;
+  overflow: clip;
+  pointer-events: none;
+
+  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
+    // Compensate for mobile menubar
+    bottom: var(--mobile-bottom-nav-height);
+  }
+
+  & > * {
+    // Make all nested alerts occupy the same space
+    // rather than stack
+    grid-area: 1 / 1;
+    pointer-events: initial;
+  }
+}
+
+.ui {
+  --mobile-bottom-nav-height: 55px;
+  --last-content-item-border-width: 2px;
+
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
+    padding-bottom: calc(
+      var(--mobile-bottom-nav-height) - var(--last-content-item-border-width)
+    );
+  }
+}
+
+.drawer {
+  width: 350px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+}
+
+.drawer__tab {
+  display: flex;
+  flex: 1 1 auto;
+  padding: 13px 3px 11px;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  text-align: center;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.column,
+.drawer {
+  flex: 1 1 100%;
+}
+
+@media screen and (width > $mobile-breakpoint) {
+  .columns-area {
+    padding: 0;
+  }
+
+  .column,
+  .drawer {
+    flex: 0 0 auto;
+    padding: 10px;
+    padding-inline-start: 5px;
+    padding-inline-end: 5px;
+
+    &:first-child {
+      padding-inline-start: 10px;
+    }
+
+    &:last-child {
+      padding-inline-end: 10px;
+    }
+  }
+
+  .columns-area > div {
+    .column,
+    .drawer {
+      padding-inline-start: 5px;
+      padding-inline-end: 5px;
+    }
+  }
+}
+
+.columns-area--mobile {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+
+  .column,
+  .drawer {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  .account-card {
+    margin-bottom: 0;
+  }
+
+  .filter-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .autosuggest-textarea__textarea {
+    font-size: 16px;
+  }
+
+  .search__input {
+    line-height: 18px;
+    font-size: 16px;
+    padding-block: 15px;
+    padding-inline-end: 30px;
+  }
+
+  .scrollable {
+    overflow: visible;
+
+    @supports (display: grid) {
+      contain: content;
+    }
+  }
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    padding: 10px 0;
+    padding-top: 0;
+  }
+}
+
+@media screen and (min-width: $no-gap-breakpoint) {
+  .react-swipeable-view-container .columns-area--mobile {
+    height: calc(100% - 10px) !important;
+  }
+
+  .getting-started__wrapper {
+    margin-bottom: 10px;
+  }
+
+  .search-page .search {
+    display: none;
+  }
+
+  .navigation-panel__legal,
+  .navigation-panel__compose-button,
+  .navigation-panel .navigation-bar {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+  $sidebar-width: 285px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
+  .columns-area__panels {
+    min-height: 100vh;
+    min-height: 100dvh;
+    gap: 0;
+    padding-inline: 0;
+  }
+
+  .columns-area__panels__pane--navigational {
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .navigation-panel {
+      margin: 0;
+      border-inline-start: 1px solid var(--color-border-primary);
+      height: 100dvh;
+    }
+
+    .navigation-panel__banner,
+    .navigation-panel__logo,
+    .getting-started__trends {
+      display: none;
+    }
+  }
+
+  .layout-single-column {
+    .column > .scrollable,
+    .tabs-bar__wrapper .column-header,
+    .tabs-bar__wrapper .column-back-button,
+    .explore__search-header,
+    .column-search-header {
+      border-left: 0;
+      border-right: 0;
+    }
+
+    .column-header,
+    .column-back-button,
+    .scrollable,
+    .error-column {
+      border-radius: 0 !important;
+    }
+
+    .column-header,
+    .column-back-button {
+      border-top: 0;
+    }
+  }
+}
+
+@media screen and (width <= 759px) {
+  .columns-area__panels__main {
+    width: 100%;
+  }
+
+  .columns-area__panels__pane--navigational {
+    position: fixed;
+    inset-inline-end: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+    pointer-events: auto;
+    background: var(--color-bg-primary);
+    position: fixed;
+    width: 284px + 70px;
+    inset-inline-end: -70px;
+    touch-action: pan-y;
+
+    .navigation-panel {
+      width: 284px;
+      overflow-y: auto;
+      scrollbar-width: thin;
+
+      &__menu {
+        flex-shrink: 0;
+        min-height: none;
+        overflow: hidden;
+        padding-bottom: calc(65px + env(safe-area-inset-bottom));
+      }
+
+      &__logo {
+        display: none;
+      }
+    }
+  }
+}
+
+.columns-area__panels__pane--navigational {
+  transition: background 500ms;
+}
+
+.columns-area__panels__pane--overlay {
+  pointer-events: auto;
+  background: rgb(from var(--color-bg-overlay) r g b / 50%);
+  z-index: 3;
+
+  .columns-area__panels__pane__inner {
+    box-shadow: var(--dropdown-shadow);
+  }
+}
+
+@media screen and (width >= 760px) {
+  .ui__navigation-bar {
+    display: none;
+  }
+}
+
+.explore-suggestions-card {
+  padding: 12px 16px;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &__source {
+    font-size: 13px;
+    line-height: 16px;
+    color: var(--color-text-tertiary);
+
+    @container (width >= 400px) {
+      padding-inline-start: 60px;
+    }
+  }
+
+  &__body {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: end;
+  }
+
+  &__avatar {
+    flex-shrink: 0;
+
+    @container (width < 360px) {
+      width: 35px !important;
+      height: 35px !important;
+    }
+  }
+
+  &__link {
+    flex: 1 1 auto;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    text-decoration: none;
+    min-width: 0;
+
+    &:hover,
+    &:focus-visible {
+      .display-name__html {
+        text-decoration: underline;
+      }
+    }
+
+    .display-name {
+      font-size: 15px;
+      line-height: 20px;
+      color: var(--color-text-primary);
+
+      strong {
+        font-weight: 700;
+      }
+
+      &__account {
+        color: var(--color-text-secondary);
+        display: block;
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: end;
+
+    .button {
+      min-width: 80px;
+    }
+  }
+
+  &__dismiss-button {
+    @container (width < 400px) {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+  .columns-area__panels__pane--compositional {
+    display: none;
+  }
+}
+
+.icon-with-badge {
+  display: inline-flex;
+  position: relative;
+
+  &__badge {
+    position: absolute;
+    inset-inline-start: 9px;
+    top: -13px;
+    color: var(--color-text-on-brand-base);
+    background: var(--color-bg-brand-base);
+    border: 2px solid var(--color-bg-primary);
+    padding: 1px 6px;
+    border-radius: 6px;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 14px;
+  }
+
+  &__issue-badge {
+    position: absolute;
+    inset-inline-start: 11px;
+    bottom: 1px;
+    display: block;
+    background: var(--color-text-error);
+    border-radius: 50%;
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+}
+
+.column-link--transparent .icon-with-badge__badge {
+  border-color: var(--color-bg-primary);
+}
+
+.column-title {
+  text-align: center;
+  padding-bottom: 32px;
+
+  h3 {
+    font-size: 24px;
+    line-height: 1.5;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--color-text-secondary);
+  }
+
+  @media screen and (width >= 600px) {
+    padding: 40px;
+  }
+}
+
+.copy-paste-text {
+  background: var(--color-bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--color-border-primary);
+  padding: 16px;
+  color: var(--color-text-primary);
+  font-size: 15px;
+  line-height: 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  transition: border-color 300ms linear;
+  margin-bottom: 30px;
+
+  &:focus,
+  &.focused {
+    transition: none;
+    outline: 0;
+    border-color: var(--color-text-brand);
+  }
+
+  &.copied {
+    border-color: var(--color-text-success);
+    transition: none;
+  }
+
+  textarea {
+    width: 100%;
+    height: auto;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    border: 0;
+    padding: 0;
+    margin-bottom: 30px;
+    resize: none;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+}
+
+.onboarding__profile {
+  position: relative;
+  margin-bottom: 40px + 20px;
+  margin-top: -20px;
+
+  .app-form__avatar-input {
+    border: 2px solid var(--color-bg-primary);
+    position: absolute;
+    inset-inline-start: -2px;
+    bottom: -40px;
+    z-index: 2;
+  }
+
+  .app-form__header-input {
+    margin: 0 -20px;
+    border-radius: 0;
+
+    img {
+      border-radius: 0;
+    }
+  }
+}
+
+.compose-panel {
+  width: 285px;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 10px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+
+  .compose-form {
+    flex: 1 1 auto;
+  }
+}
+
+.navigation-panel {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: calc(100% - 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__menu {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  &__list-panel {
+    &__header {
+      display: flex;
+      align-items: center;
+      padding-inline-end: 4px;
+
+      &__sep {
+        width: 0;
+        height: 24px;
+        border-left: 1px solid var(--color-border-primary);
+      }
+
+      .column-link {
+        flex: 1 1 auto;
+      }
+
+      .icon-button {
+        padding: 8px;
+      }
+    }
+
+    &__items {
+      padding-inline-start: 24px + 8px;
+
+      .icon {
+        display: none;
+      }
+    }
+  }
+
+  &__compose-button {
+    display: flex;
+    justify-content: flex-start;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-inline-start: 12px - 7px;
+    padding-inline-end: 12px;
+    gap: 8px;
+    margin: 12px;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 18px;
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .navigation-bar {
+    padding: 16px;
+  }
+
+  .search {
+    margin: 16px;
+    margin-bottom: 12px;
+  }
+
+  .logo {
+    height: 30px;
+    width: auto;
+  }
+
+  &__logo {
+    margin-bottom: 12px;
+  }
+
+  .getting-started__trends h4 {
+    padding: 10px 12px;
+    padding-inline-start: 16px;
+  }
+
+  .getting-started__trends .trends__item {
+    padding: 10px 12px;
+    padding-inline-start: 16px;
+  }
+
+  @media screen and (height <= 930px) {
+    &__portal .trends__item:nth-child(n + 5) {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= (930px - 56px)) {
+    &__portal .trends__item:nth-child(n + 4) {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= (930px - 56px * 2)) {
+    &__portal .trends__item:nth-child(n + 3) {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= (930px - 56px * 3)) {
+    &__portal {
+      display: none;
+    }
+  }
+}
+
+.navigation-panel,
+.compose-panel {
+  hr {
+    flex: 0 0 auto;
+    border: 0;
+    background: transparent;
+    border-top: 1px solid var(--color-border-primary);
+    margin: 10px 0;
+  }
+
+  .flex-spacer {
+    background: transparent;
+  }
+}
+
+.drawer__pager {
+  box-sizing: border-box;
+  padding: 0;
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-primary);
+}
+
+.drawer__inner {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  background: var(--color-bg-primary);
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.drawer__inner__mastodon {
+  position: relative;
+  background: var(--color-bg-primary);
+  flex: 1;
+  min-height: 47px;
+  display: none;
+  contain: content;
+
+  > img {
+    display: block;
+    object-fit: contain;
+    object-position: bottom left;
+    width: 85%;
+    height: 100%;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  @media screen and (height >= 640px) {
+    display: block;
+  }
+}
+
+.drawer__header {
+  flex: 0 0 auto;
+  font-size: 16px;
+  border: 1px solid var(--color-border-primary);
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  border-radius: 4px;
+  overflow: hidden;
+
+  a:hover,
+  a:focus,
+  a:active {
+    color: var(--color-text-primary);
+  }
+}
+
+.scrollable {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  flex: 1 1 auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+
+  &.optionally-scrollable {
+    overflow-y: auto;
+  }
+
+  @supports (display: grid) {
+    // hack to fix Chrome <57
+    contain: strict;
+  }
+
+  &--flex {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__append {
+    flex: 1 1 auto;
+    position: relative;
+    min-height: 120px;
+  }
+
+  .scrollable {
+    flex: 1 1 auto;
+  }
+}
+
+.scrollable.fullscreen {
+  @supports (display: grid) {
+    // hack to fix Chrome <57
+    contain: none;
+  }
+}
+
+.column-back-button {
+  box-sizing: border-box;
+  width: 100%;
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px 4px 0 0;
+  color: var(--color-text-brand);
+  cursor: pointer;
+  flex: 0 0 auto;
+  font-size: 16px;
+  line-height: inherit;
+  text-align: unset;
+  padding: 13px;
+  margin: 0;
+  z-index: 3;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.column-header__back-button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: transparent;
+  border: 0;
+  font-family: inherit;
+  color: var(--color-text-brand);
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 16px;
+  padding: 13px;
+  z-index: 3;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &.compact {
+    padding-inline-end: 5px;
+    flex: 0 0 auto;
+  }
+}
+
+.react-toggle {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: 10px;
+  padding: 0;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle--focus,
+.react-toggle:focus-within {
+  outline: var(--outline-focus-default);
+  outline-offset: 2px;
+
+  .react-toggle-track {
+    border-color: transparent;
+  }
+}
+
+.react-toggle-screenreader-only,
+.sr-only {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 32px;
+  height: 20px;
+  padding: 0;
+  border-radius: 10px;
+  background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%);
+  border: 1px solid rgb(from var(--color-text-brand) r g b / 50%);
+  box-sizing: border-box;
+
+  .react-toggle:hover:not(.react-toggle--disabled) & {
+    background-color: rgb(
+      from var(--color-bg-brand-softer) r g b /
+        calc(50% + var(--overlay-strength-brand))
+    );
+  }
+
+  .react-toggle--checked & {
+    background-color: var(--color-bg-brand-base);
+    border-color: var(--color-bg-brand-base);
+  }
+
+  .react-toggle--checked:not(.react-toggle--disabled):hover & {
+    background-color: var(--color-bg-brand-base-hover);
+  }
+}
+
+.react-toggle-track-check,
+.react-toggle-track-x {
+  display: none;
+}
+
+.react-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  inset-inline-start: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--color-text-on-brand-base);
+  box-sizing: border-box;
+  transition: all 0.25s ease;
+  transition-property: border-color, left;
+
+  .react-toggle--checked & {
+    inset-inline-start: 32px - 16px - 2px;
+    border-color: var(--color-bg-brand-base);
+  }
+}
+
+.follow_requests-unlocked_explanation,
+.switch-to-advanced {
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-secondary);
+  padding: 15px;
+  border-radius: 4px;
+  margin-top: 4px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  line-height: 18px;
+
+  a {
+    color: var(--color-text-brand);
+    font-weight: bold;
+  }
+}
+
+.column-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration: none;
+  overflow: hidden;
+  white-space: nowrap;
+  color: color-mix(
+    in oklab,
+    var(--color-text-primary),
+    var(--color-text-secondary)
+  );
+  background: transparent;
+  border: 0;
+  border-left: 4px solid transparent;
+  box-sizing: border-box;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: var(--color-text-primary);
+  }
+
+  &.active {
+    color: var(--color-text-brand);
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    border-color: var(--color-text-brand);
+    border-radius: 0;
+  }
+
+  &--logo {
+    background: transparent;
+    padding: 10px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: transparent;
+    }
+  }
+}
+
+.column-link__badge {
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 19px;
+  font-weight: 500;
+  background: var(--color-bg-primary);
+  padding: 4px 8px;
+  margin: -6px 10px;
+}
+
+.column-subheading {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  padding: 8px 20px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  cursor: default;
+}
+
+.getting-started__wrapper {
+  flex: 0 0 auto;
+}
+
+.flex-spacer {
+  flex: 1 1 auto;
+}
+
+.getting-started {
+  color: var(--color-text-tertiary);
+  overflow: auto;
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+
+  &__trends {
+    flex: 0 1 auto;
+    opacity: 1;
+    animation: fade 150ms linear;
+    margin-top: 10px;
+
+    h4 {
+      border-bottom: 1px solid var(--color-border-primary);
+      padding: 10px;
+      font-size: 12px;
+      text-transform: uppercase;
+      font-weight: 500;
+
+      a {
+        color: var(--color-text-secondary);
+        text-decoration: none;
+      }
+    }
+
+    .trends__item {
+      border-bottom: 0;
+      padding: 10px;
+
+      &__current {
+        color: var(--color-text-secondary);
+      }
+    }
+  }
+}
+
+.keyboard-shortcuts {
+  padding: 8px 0 0;
+  overflow: hidden;
+
+  thead {
+    position: absolute;
+    inset-inline-start: -9999px;
+  }
+
+  td {
+    padding: 0 10px 8px;
+  }
+
+  kbd {
+    display: inline-block;
+  }
+}
+
+.status-card {
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin-top: 14px;
+  text-decoration: none;
+  overflow: hidden;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  contain: inline-size layout paint style;
+
+  &.bottomless {
+    border-radius: 8px 8px 0 0;
+  }
+
+  &__actions {
+    bottom: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    inset-inline-end: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    & > div {
+      background: rgb(from var(--color-shadow-primary) r g b / 60%);
+      border-radius: 8px;
+      padding: 12px 9px;
+      backdrop-filter: $backdrop-blur-filter;
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    button,
+    a {
+      display: inline;
+      color: var(--color-text-primary);
+      background: transparent;
+      border: 0;
+      padding: 0 8px;
+      text-decoration: none;
+      font-size: 18px;
+      line-height: 18px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: var(--color-text-primary);
+      }
+    }
+
+    a {
+      font-size: 19px;
+      position: relative;
+      bottom: -1px;
+    }
+  }
+}
+
+a.status-card {
+  cursor: pointer;
+
+  &:hover,
+  &:focus,
+  &:active {
+    .status-card__title,
+    .status-card__host,
+    .status-card__author,
+    .status-card__description {
+      color: var(--color-text-brand);
+    }
+  }
+}
+
+.status-card a {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    .status-card__title,
+    .status-card__host,
+    .status-card__author,
+    .status-card__description {
+      color: var(--color-text-brand);
+    }
+  }
+}
+
+.status-card-photo {
+  cursor: zoom-in;
+  display: block;
+  text-decoration: none;
+  width: 100%;
+  height: auto;
+  margin: 0;
+}
+
+.status-card-video {
+  // Firefox has a bug where frameborder=0 iframes add some extra blank space
+  // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174
+  overflow: hidden;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.status-card__title {
+  display: block;
+  font-weight: 700;
+  font-size: 19px;
+  line-height: 24px;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.status-card.expanded .status-card__title {
+  white-space: normal;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.status-card__content {
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding: 15px;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.status-card__host {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-card__author {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
+.status-card__description {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-card__image {
+  flex: 0 0 auto;
+  width: 120px;
+  aspect-ratio: 1;
+  background: var(--color-bg-secondary);
+  position: relative;
+
+  & > .icon {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    transform-origin: 50% 50%;
+    top: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.status-card__image-image {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-size: cover;
+  background-position: center center;
+}
+
+.status-card__image-preview {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: 0;
+  background: var(--color-bg-primary);
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.status-card.expanded {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.status-card.expanded .status-card__image {
+  width: 100%;
+  aspect-ratio: auto;
+}
+
+.status-card__image,
+.status-card__image-image,
+.status-card__image-preview {
+  border-start-start-radius: 8px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 8px;
+}
+
+.status-card.expanded .status-card__image,
+.status-card.expanded .status-card__image-image,
+.status-card.expanded .status-card__image-preview {
+  border-start-end-radius: 8px;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.status-card.bottomless .status-card__image,
+.status-card.bottomless .status-card__image-image,
+.status-card.bottomless .status-card__image-preview {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.status-card.expanded > a {
+  width: 100%;
+}
+
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-primary);
+  background-color: transparent;
+  border: 0;
+  font-size: inherit;
+  line-height: inherit;
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  text-decoration: none;
+
+  &--large {
+    padding-block: 32px;
+  }
+
+  &:is(button) {
+    &:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-text-brand);
+      outline-offset: -2px;
+    }
+  }
+
+  .icon {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+.load-gap {
+  border-bottom: 1px solid var(--color-border-primary);
+}
+
+.timeline-hint {
+  text-align: center;
+  color: var(--color-text-secondary);
+  padding: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 14px;
+  line-height: 21px;
+
+  strong {
+    font-weight: 500;
+  }
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+      color: var(--color-text-brand-soft);
+    }
+  }
+
+  &--with-descendants {
+    border-top: 1px solid var(--color-border-primary);
+  }
+}
+
+.regeneration-indicator {
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+  cursor: default;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+
+  &__figure {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: 350px;
+    margin-top: -50px;
+  }
+
+  &__label {
+    text-align: center;
+    font-size: 16px;
+
+    strong {
+      font-weight: 500;
+      display: block;
+      margin-bottom: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    span {
+      font-size: 15px;
+    }
+  }
+}
+
+.column-header__wrapper {
+  position: relative;
+  flex: 0 0 auto;
+  z-index: 1;
+
+  &.active {
+    box-shadow: 0 1px 0 var(--color-bg-brand-softer);
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      bottom: -13px;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      margin: 0 auto;
+      width: 60%;
+      pointer-events: none;
+      height: 28px;
+      z-index: 1;
+      background: radial-gradient(
+        ellipse,
+        rgb(from var(--color-bg-brand-softer-base) r g b / 23%) 0%,
+        transparent 60%
+      );
+    }
+  }
+
+  .announcements {
+    z-index: 1;
+    position: relative;
+  }
+}
+
+.column-header__select-row {
+  border-width: 0 1px 1px;
+  border-style: solid;
+  border-color: var(--color-border-primary);
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &__checkbox .check-box {
+    display: flex;
+  }
+
+  &__select-menu:disabled {
+    visibility: hidden;
+  }
+
+  &__mode-button {
+    margin-left: auto;
+    color: var(--color-text-brand);
+    font-weight: bold;
+    font-size: 14px;
+
+    &:hover {
+      color: var(--color-text-brand-soft);
+    }
+  }
+}
+
+.column-header {
+  display: flex;
+  font-size: 16px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px 4px 0 0;
+  flex: 0 0 auto;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+  outline: 0;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin: 0;
+    border: 0;
+    padding: 13px;
+    padding-inline-end: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: start;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex: 1;
+
+    &:focus-visible {
+      outline: var(--outline-focus-default);
+    }
+
+    .logo {
+      height: 24px;
+    }
+  }
+
+  .column-header__back-button + &__title {
+    padding-inline-start: 0;
+  }
+
+  .column-header__back-button {
+    flex: 1;
+    color: var(--color-text-brand);
+
+    &.compact {
+      flex: 0 0 auto;
+      color: var(--color-text-primary);
+    }
+  }
+
+  &.active {
+    .column-header__icon {
+      color: var(--color-text-brand);
+      text-shadow: 0 0 10px var(--color-bg-brand-softer);
+    }
+  }
+
+  &:focus,
+  &:active {
+    outline: 0;
+  }
+
+  &__advanced-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    padding-top: 0;
+
+    &:first-child {
+      padding-top: 16px;
+    }
+  }
+}
+
+.column-header__buttons {
+  height: 48px;
+  display: flex;
+}
+
+.column-header__links {
+  margin-bottom: 14px;
+}
+
+.column-header__links .text-btn {
+  margin-inline-end: 10px;
+}
+
+.column-header__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  color: var(--color-text-primary);
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0 15px;
+
+  &:last-child {
+    border-start-end-radius: 4px;
+  }
+
+  &:hover {
+    color: var(--color-text-secondary);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+  }
+
+  &.active {
+    color: var(--color-text-brand);
+
+    &:hover {
+      color: var(--color-text-brand);
+    }
+  }
+
+  &:disabled {
+    color: var(--color-text-disabled);
+    cursor: default;
+  }
+}
+
+.no-reduce-motion .column-header__button .icon-sliders {
+  transition: transform 150ms ease-in-out;
+}
+
+.column-header__collapsible {
+  max-height: 70vh;
+  overflow: hidden;
+  overflow-y: auto;
+  color: var(--color-text-secondary);
+  transition:
+    max-height 150ms ease-in-out,
+    opacity 300ms linear;
+  opacity: 1;
+  z-index: 1;
+  position: relative;
+  border-left: 1px solid var(--color-border-primary);
+  border-right: 1px solid var(--color-border-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+  }
+
+  &.collapsed {
+    max-height: 0;
+    opacity: 0.5;
+    border-bottom: 0;
+  }
+
+  &.animating {
+    overflow-y: hidden;
+  }
+
+  hr {
+    height: 0;
+    background: transparent;
+    border: 0;
+    border-top: 1px solid var(--color-border-primary);
+    margin: 10px 0;
+  }
+}
+
+.column-header__collapsible-inner {
+  border-top: 0;
+}
+
+.column-header__setting-btn {
+  &:hover,
+  &:focus {
+    color: var(--color-text-secondary);
+    text-decoration: underline;
+  }
+}
+
+.column-header__collapsible__extra + .column-header__setting-btn {
+  padding-top: 5px;
+}
+
+.column-header__permission-btn {
+  display: inline;
+  font-weight: inherit;
+  text-decoration: underline;
+}
+
+.column-header__setting-arrows {
+  display: flex;
+  align-items: center;
+}
+
+.text-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-decoration: none;
+
+  .icon {
+    width: 13px;
+    height: 13px;
+  }
+}
+
+.column-header__issue-btn {
+  color: var(--color-text-error);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.loading-indicator {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 400;
+  text-transform: uppercase;
+  overflow: visible;
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.load-more .loading-indicator,
+.button .loading-indicator,
+.icon-button .loading-indicator {
+  position: static;
+  transform: none;
+  color: inherit;
+
+  .circular-progress {
+    color: inherit;
+    width: 22px;
+    height: 22px;
+  }
+}
+
+.button--compact .loading-indicator .circular-progress {
+  width: 17px;
+  height: 17px;
+}
+
+.icon-button .loading-indicator .circular-progress {
+  color: var(--color-text-tertiary);
+  width: 12px;
+  height: 12px;
+  margin: 6px;
+}
+
+.load-more .loading-indicator .circular-progress {
+  color: var(--color-text-tertiary);
+}
+
+.circular-progress {
+  color: var(--color-text-tertiary);
+  animation: 1.4s linear 0s infinite normal none running simple-rotate;
+
+  circle {
+    stroke: currentColor;
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0;
+    animation: circular-progress 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes circular-progress {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}
+
+@keyframes simple-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spring-rotate-in {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  30% {
+    transform: rotate(-484.8deg);
+  }
+
+  60% {
+    transform: rotate(-316.7deg);
+  }
+
+  90% {
+    transform: rotate(-375deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+@keyframes spring-rotate-out {
+  0% {
+    transform: rotate(-360deg);
+  }
+
+  30% {
+    transform: rotate(124.8deg);
+  }
+
+  60% {
+    transform: rotate(-43.27deg);
+  }
+
+  90% {
+    transform: rotate(15deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.video-error-cover {
+  align-items: center;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  margin-top: 8px;
+  position: relative;
+  text-align: center;
+  z-index: 100;
+}
+
+.spoiler-button {
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+
+  &--hidden {
+    display: none;
+  }
+
+  &--click-thru {
+    pointer-events: none;
+  }
+
+  &__overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    color: var(--color-text-on-media);
+    line-height: 20px;
+    font-size: 14px;
+
+    &__label {
+      background-color: var(--color-bg-media);
+      backdrop-filter: $backdrop-blur-filter;
+      border-radius: 8px;
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      flex-direction: column;
+      font-weight: 600;
+    }
+
+    &__action {
+      font-weight: 400;
+      font-size: 13px;
+    }
+
+    &:hover,
+    &:focus {
+      .spoiler-button__overlay__label {
+        background-color: rgb(from var(--color-bg-media-base) r g b / 90%);
+      }
+    }
+  }
+}
+
+.account--panel {
+  border-top: 1px solid var(--color-border-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+}
+
+.account--panel__button,
+.detailed-status__button {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.column-settings {
+  display: flex;
+  flex-direction: column;
+
+  &__section {
+    // FIXME: Legacy
+    color: var(--color-text-secondary);
+    cursor: default;
+    display: block;
+    font-weight: 500;
+  }
+
+  .column-header__links {
+    margin: 0;
+  }
+
+  section {
+    padding: 16px;
+    border-bottom: 1px solid var(--color-border-primary);
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  h3 {
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 16px;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .app-form__toggle {
+    &__toggle > div {
+      border: 0;
+    }
+  }
+}
+
+.column-settings__hashtags {
+  margin-top: 15px;
+
+  .column-settings__row {
+    margin-bottom: 15px;
+  }
+
+  .column-select {
+    &__control {
+      @include search-input;
+
+      &::placeholder {
+        color: color-mix(
+          in oklab,
+          var(--color-text-primary),
+          var(--color-text-secondary)
+        );
+      }
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:focus {
+        background: var(--color-bg-secondary);
+      }
+
+      @media screen and (width <= 600px) {
+        font-size: 16px;
+      }
+    }
+
+    &__placeholder {
+      color: var(--color-text-tertiary);
+      padding-inline-start: 2px;
+      font-size: 12px;
+    }
+
+    &__value-container {
+      padding-inline-start: 6px;
+    }
+
+    &__multi-value {
+      background: var(--color-bg-secondary);
+
+      &__remove {
+        cursor: pointer;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background: var(--color-bg-brand-softer);
+          color: color-mix(
+            in oklab,
+            var(--color-text-primary),
+            var(--color-text-secondary)
+          );
+        }
+      }
+    }
+
+    &__multi-value__label,
+    &__input,
+    &__input-container {
+      color: var(--color-text-secondary);
+    }
+
+    &__clear-indicator,
+    &__dropdown-indicator {
+      cursor: pointer;
+      transition: none;
+      color: var(--color-text-tertiary);
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: var(--color-text-secondary);
+      }
+    }
+
+    &__indicator-separator {
+      background-color: var(--color-border-primary);
+    }
+
+    &__menu {
+      @include search-popout;
+
+      padding: 0;
+      background: var(--color-bg-elevated);
+    }
+
+    &__menu-list {
+      padding: 6px;
+    }
+
+    &__option {
+      color: var(--color-text-primary);
+      border-radius: 4px;
+      font-size: 14px;
+
+      &--is-focused,
+      &--is-selected {
+        color: var(--color-text-on-brand-base);
+        background: var(--color-bg-brand-base);
+      }
+    }
+  }
+}
+
+.column-settings__row {
+  .text-btn:not(.column-header__permission-btn) {
+    margin-bottom: 15px;
+  }
+}
+
+.setting-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.setting-toggle__label {
+  color: var(--color-text-secondary);
+}
+
+.limited-account-hint {
+  p {
+    color: var(--color-text-primary);
+    font-size: 15px;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+
+.empty-column-indicator {
+  color: var(--color-text-secondary);
+  text-align: center;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  cursor: default;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+
+  & > span {
+    max-width: 500px;
+  }
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.empty-column-indicator {
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    inset-inline-start: 50%;
+    pointer-events: none;
+    transform: translate(100%, -100%) rotate(12deg);
+    transform-origin: center;
+  }
+}
+
+.follow_requests-unlocked_explanation {
+  margin: 16px;
+  margin-bottom: 0;
+}
+
+.error-column {
+  padding: 20px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  cursor: default;
+
+  &__image {
+    width: 70%;
+    max-width: 350px;
+    margin-top: -50px;
+  }
+
+  &__message {
+    text-align: center;
+    color: var(--color-text-secondary);
+    font-size: 15px;
+    line-height: 22px;
+
+    h1 {
+      font-size: 28px;
+      line-height: 33px;
+      font-weight: 700;
+      margin-bottom: 15px;
+      color: var(--color-text-primary);
+    }
+
+    p {
+      max-width: 48ch;
+    }
+
+    &__actions {
+      margin-top: 30px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    transform: scale(0.91);
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    transform: scale(0.98);
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    transform: scale(0.87);
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+}
+
+.no-reduce-motion .pulse-loading {
+  transform-origin: center center;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+.emoji-picker-dropdown__menu {
+  position: relative;
+  margin-top: 5px;
+  z-index: 2;
+  background: var(--color-bg-elevated);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 1px solid var(--color-border-primary);
+  box-shadow: var(--dropdown-shadow);
+  border-radius: 5px;
+
+  .emoji-mart-scroll {
+    transition: opacity 200ms ease;
+  }
+
+  &.selecting .emoji-mart-scroll {
+    opacity: 0.5;
+  }
+}
+
+.emoji-picker-dropdown__modifiers {
+  position: absolute;
+  top: 60px;
+  inset-inline-end: 11px;
+  cursor: pointer;
+}
+
+.emoji-picker-dropdown__modifiers__menu {
+  position: absolute;
+  z-index: 4;
+  top: -5px;
+  inset-inline-start: -9px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  box-shadow: var(--dropdown-shadow);
+  overflow: hidden;
+
+  button {
+    display: block;
+    cursor: pointer;
+    border: 0;
+    padding: 4px 8px;
+    background: transparent;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: var(--color-border-primary);
+    }
+  }
+
+  .emoji-mart-emoji {
+    height: 22px;
+  }
+}
+
+.emoji-mart-emoji {
+  span {
+    background-repeat: no-repeat;
+  }
+}
+
+.upload-area {
+  align-items: center;
+  background: rgb(from var(--color-bg-overlay) r g b / 80%);
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  inset-inline-start: 0;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  visibility: hidden;
+  width: 100vw;
+  z-index: 2000;
+
+  * {
+    pointer-events: none;
+  }
+}
+
+.upload-area__drop {
+  width: 320px;
+  height: 160px;
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  padding: 8px;
+}
+
+.upload-area__background {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  z-index: -1;
+  border-radius: 4px;
+  background: var(--color-bg-elevated);
+  box-shadow: 0 0 5px var(--color-shadow-primary);
+}
+
+.upload-area__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--color-text-primary);
+  font-size: 18px;
+  font-weight: 500;
+  border: 2px dashed var(--color-border-primary);
+  border-radius: 4px;
+}
+
+.upload-progress {
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 0 12px;
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    color: var(--color-text-brand);
+  }
+
+  span {
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 500;
+    display: block;
+  }
+}
+
+.upload-progress__message {
+  flex: 1 1 auto;
+}
+
+.upload-progress__backdrop {
+  width: 100%;
+  height: 6px;
+  border-radius: 6px;
+  background: var(--color-bg-primary);
+  position: relative;
+  margin-top: 5px;
+}
+
+.upload-progress__tracker {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: 6px;
+  background: var(--color-text-brand);
+  border-radius: 6px;
+}
+
+.emoji-button {
+  display: block;
+  padding-top: 5px;
+  padding-bottom: 2px;
+  padding-inline-start: 2px;
+  padding-inline-end: 5px;
+  outline: 0;
+  cursor: pointer;
+
+  img {
+    filter: grayscale(100%);
+    opacity: 0.8;
+    display: block;
+    margin: 0;
+    width: 22px;
+    height: 22px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    img {
+      opacity: 1;
+      filter: none;
+      border-radius: 100%;
+    }
+  }
+
+  &:focus-visible {
+    img {
+      outline: var(--outline-focus-default);
+    }
+  }
+}
+
+.dropdown--active .emoji-button img {
+  opacity: 1;
+  filter: none;
+}
+
+.privacy-dropdown__dropdown,
+.language-dropdown__dropdown,
+.visibility-dropdown__dropdown {
+  box-shadow: var(--dropdown-shadow);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-primary);
+  padding: 4px;
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 2;
+
+  &.top {
+    transform-origin: 50% 100%;
+  }
+
+  &.bottom {
+    transform-origin: 50% 0;
+  }
+}
+
+.modal-root__container .privacy-dropdown {
+  flex-grow: 0;
+}
+
+.modal-root__container .privacy-dropdown__dropdown {
+  pointer-events: auto;
+  z-index: 9999;
+}
+
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: 4px;
+  color: var(--color-text-primary);
+
+  // Make sure adjacent hover/active states don't have a meeting radius.
+  &:hover + &:is(:focus, .active),
+  &:is(:focus, .active) + &:hover,
+  &:is(:focus, .active) + &:is(:focus, .active) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:hover:has(+ :focus, .active),
+  &:is(:focus, .active):has(+ :hover),
+  &:is(:focus, .active):has(+ :is(:focus, .active)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:hover,
+  &:active {
+    background: var(--color-bg-secondary);
+  }
+
+  &:focus,
+  &.active {
+    background: var(--color-bg-brand-base);
+    color: var(--color-text-on-brand-base);
+    outline: 0;
+
+    .privacy-dropdown__option__content,
+    .privacy-dropdown__option__content strong,
+    .privacy-dropdown__option__additional,
+    .visibility-dropdown__option__content,
+    .visibility-dropdown__option__content strong,
+    .visibility-dropdown__option__additional {
+      color: var(--color-text-on-brand-base);
+    }
+  }
+
+  &__additional {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-secondary);
+    cursor: help;
+  }
+}
+
+.privacy-dropdown__option__icon,
+.visibility-dropdown__option__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.privacy-dropdown__option__content,
+.visibility-dropdown__option__content {
+  flex: 1 1 auto;
+  color: var(--color-text-secondary);
+
+  strong {
+    color: var(--color-text-primary);
+    font-weight: 500;
+    display: block;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.language-dropdown {
+  &__dropdown {
+    width: 300px;
+    padding: 0;
+
+    .emoji-mart-search {
+      padding: 10px;
+      background: var(--color-bg-elevated);
+
+      input {
+        padding: 8px 12px;
+        background: var(--color-bg-primary);
+        border: 1px solid var(--color-border-primary);
+        color: var(--color-text-secondary);
+
+        @media screen and (width <= 600px) {
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 0.5px;
+        }
+      }
+    }
+
+    .emoji-mart-search-icon {
+      inset-inline-end: 15px;
+      opacity: 1;
+      color: var(--color-text-primary);
+
+      .icon {
+        width: 18px;
+        height: 18px;
+      }
+
+      &:disabled {
+        color: var(--color-text-secondary);
+      }
+    }
+
+    .emoji-mart-scroll {
+      padding: 0 10px 10px;
+      background: var(--color-bg-elevated);
+    }
+
+    &__results {
+      &__item {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        cursor: pointer;
+        color: var(--color-text-primary);
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
+        font-weight: 500;
+        padding: 8px 12px;
+        border-radius: 4px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &__common-name {
+          color: var(--color-text-secondary);
+          font-weight: 400;
+        }
+
+        &:active,
+        &:hover {
+          background: var(--color-bg-secondary);
+        }
+
+        &:focus,
+        &.active {
+          background: var(--color-bg-brand-base);
+          color: var(--color-text-on-brand-base);
+          outline: 0;
+
+          .language-dropdown__dropdown__results__item__common-name {
+            color: var(--color-text-on-brand-base);
+          }
+        }
+      }
+    }
+  }
+}
+
+.visibility-modal {
+  &__quote-warning {
+    color: var(--color-text-primary);
+    background: var(--color-bg-warning-softer);
+    padding: 16px;
+    border-radius: 4px;
+
+    h3 {
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+
+    p {
+      font-size: 0.8em;
+    }
+  }
+}
+
+.visibility-dropdown {
+  &__overlay[data-popper-placement] {
+    z-index: 9999;
+  }
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  &__label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    color: var(--color-text-primary);
+    background: var(--color-bg-secondary-solid);
+    border: 1px solid var(--color-border-primary);
+    padding: 8px 12px;
+    width: 100%;
+    text-align: left;
+    border-radius: 4px;
+    font-size: 14px;
+    height: 40px;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  &__icon {
+    margin-inline: auto -4px;
+    width: 18px;
+    height: 18px;
+    opacity: 0.5;
+  }
+
+  &__helper {
+    margin-top: 4px;
+    font-size: 0.8em;
+    color: var(--color-text-tertiary);
+  }
+}
+
+.search {
+  margin-bottom: 32px;
+  position: relative;
+
+  .layout-multiple-columns & {
+    margin-bottom: 10px;
+  }
+
+  &__popout {
+    box-sizing: border-box;
+    display: none;
+    position: absolute;
+    inset-inline-start: 0;
+    margin-top: -2px;
+    width: 100%;
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0 0 4px 4px;
+    box-shadow: var(--dropdown-shadow);
+    z-index: 99;
+    font-size: 13px;
+    padding: 15px 5px;
+
+    h4 {
+      text-transform: uppercase;
+      color: var(--color-text-secondary);
+      font-weight: 500;
+      padding: 0 10px;
+      margin-bottom: 10px;
+    }
+
+    .icon-button {
+      padding: 0;
+      color: var(--color-text-secondary);
+    }
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    &__menu {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &__message {
+        color: var(--color-text-secondary);
+        padding: 0 10px;
+      }
+
+      &__item {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        border: 0;
+        font: inherit;
+        background: transparent;
+        color: var(--color-text-secondary);
+        padding: 10px;
+        cursor: pointer;
+        border-radius: 4px;
+        text-align: start;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &--flex {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .icon-button {
+          transition: none;
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.selected {
+          color: var(--color-text-on-brand-base);
+          background: var(--color-bg-brand-base);
+
+          .icon-button {
+            color: inherit;
+          }
+        }
+
+        mark {
+          background: transparent;
+          font-weight: 700;
+          color: var(--color-text-primary);
+        }
+
+        span {
+          overflow: inherit;
+          text-overflow: inherit;
+        }
+      }
+    }
+  }
+
+  &.active {
+    .search__input {
+      border-radius: 4px 4px 0 0;
+    }
+
+    .search__popout {
+      display: block;
+    }
+  }
+}
+
+.search__input {
+  @include search-input;
+
+  display: block;
+  padding: 12px 16px;
+  padding-inline-start: 16px + 15px + 8px;
+  line-height: normal;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+}
+
+.search__icon-wrapper {
+  position: absolute;
+  top: 14px;
+  display: grid;
+  margin-inline-start: 16px - 2px;
+  width: 20px;
+  height: 20px;
+
+  .icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:not(.has-value) {
+    pointer-events: none;
+  }
+}
+
+.search__icon {
+  grid-area: 1 / 1;
+  transition: all 100ms linear;
+  transition-property: transform, opacity;
+  color: var(--color-text-secondary);
+}
+
+.search__icon.icon-search {
+  .has-value & {
+    pointer-events: none;
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+}
+
+.search__icon--clear-button {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus {
+    outline: 0 !important;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-text-brand);
+  }
+
+  &[aria-hidden='true'] {
+    pointer-events: none;
+    opacity: 0;
+    transform: rotate(-90deg);
+  }
+}
+
+.search-results__section {
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-border-primary);
+    background: var(--color-bg-tertiary);
+    padding: 15px;
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    display: flex;
+    justify-content: space-between;
+
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    button {
+      color: var(--color-text-brand);
+      padding: 0;
+      border: 0;
+      background: 0;
+      font: inherit;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .account:last-child,
+  & > div:last-child .status {
+    border-bottom: 0;
+  }
+}
+
+.search-results__info {
+  padding: 20px;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.modal-root {
+  position: relative;
+  z-index: 9998;
+}
+
+.modal-root__overlay {
+  position: fixed;
+  top: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  opacity: 0.9;
+  background: var(--color-bg-overlay);
+  transition: background 0.5s;
+}
+
+.modal-root__container {
+  position: fixed;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-content: space-around;
+  z-index: 9999;
+  pointer-events: none;
+  user-select: none;
+  overscroll-behavior: none;
+}
+
+.modal-root__modal {
+  pointer-events: auto;
+  user-select: text;
+  display: flex;
+  max-width: 100vw;
+
+  @media screen and (width <= $mobile-breakpoint) {
+    margin-top: auto;
+  }
+}
+
+.video-modal .video-player {
+  max-height: 80vh;
+  max-width: 100vw;
+}
+
+.audio-modal__container {
+  width: 50vw;
+}
+
+.media-modal {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  touch-action: pan-y;
+
+  &__buttons {
+    position: absolute;
+    inset-inline-end: 8px;
+    top: 8px;
+    z-index: 100;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .icon-button {
+      --default-icon-color: var(--color-text-on-media);
+      --default-bg-color: transparent;
+      --hover-icon-color: var(--color-text-on-media);
+      --hover-bg-color: rgb(
+        from var(--color-text-on-media) r g b /
+          var(--overlay-strength-secondary)
+      );
+
+      padding: 8px;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+        filter: var(--overlay-icon-shadow);
+      }
+    }
+  }
+}
+
+.media-modal__closer {
+  display: flex;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: space-around; // If set to center, the fullscreen image overlay is misaligned.
+
+  > div {
+    flex-shrink: 0;
+    overflow: auto;
+  }
+}
+
+.media-modal__navigation {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  pointer-events: none;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+
+  * {
+    pointer-events: auto;
+  }
+
+  &.media-modal__navigation--hidden {
+    opacity: 0;
+
+    * {
+      pointer-events: none;
+    }
+  }
+}
+
+.media-modal__nav {
+  background: transparent;
+  box-sizing: border-box;
+  border: 0;
+  color: var(--color-text-on-media);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  height: 20vmax;
+  margin: auto 0;
+  padding: 30px 5px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  transform: scaleX(var(--text-x-direction));
+
+  .icon {
+    border-radius: 5px;
+    padding: 10px;
+  }
+
+  &:hover .icon,
+  &:focus .icon,
+  &:active .icon {
+    background: rgb(
+      from var(--color-text-on-media) r g b / var(--overlay-strength-secondary)
+    );
+  }
+}
+
+.media-modal__nav--prev {
+  inset-inline-start: 0;
+}
+
+.media-modal__nav--next {
+  inset-inline-end: 0;
+}
+
+.media-modal__overlay {
+  max-width: 600px;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  bottom: 0;
+  margin: 0 auto;
+
+  .picture-in-picture__footer {
+    border-radius: 0;
+    border: none;
+    background: transparent;
+    backdrop-filter: none;
+    padding: 16px;
+
+    .icon-button {
+      --default-icon-color: var(--color-text-on-media);
+      --default-bg-color: transparent;
+      --hover-icon-color: var(--color-text-on-media);
+      --hover-bg-color: rgb(
+        from var(--color-text-on-media) r g b / var(--overlay-strength-brand)
+      );
+
+      .icon {
+        filter: var(--overlay-icon-shadow);
+      }
+
+      &.active {
+        --default-icon-color: var(--color-text-brand);
+        --hover-icon-color: var(--color-text-brand);
+        --hover-bg-color: var(--color-bg-brand-soft);
+      }
+
+      &.star-icon.active {
+        --default-icon-color: var(--color-text-favourite-highlight);
+        --hover-icon-color: var(--color-text-favourite-highlight);
+        --hover-bg-color: rgb(
+          from var(--color-text-favourite-highlight) r g b /
+            var(--overlay-strength-brand)
+        );
+      }
+
+      &.disabled {
+        --default-icon-color: var(--color-text-on-media);
+        --default-bg-color: transparent;
+
+        cursor: default;
+        opacity: 0.4;
+      }
+    }
+  }
+}
+
+.media-modal__pagination {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.media-modal__page-dot {
+  flex: 0 0 auto;
+  background-color: rgb(from var(--color-text-on-media) r g b / 40%);
+  filter: var(--overlay-icon-shadow);
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  margin: 0 4px;
+  padding: 0;
+  border: 0;
+  font-size: 0;
+  transition: background-color 0.2s ease-in-out;
+
+  &.active {
+    background-color: var(--color-text-on-media);
+  }
+
+  &:focus {
+    opacity: 1;
+    outline: 2px solid var(--color-text-on-media);
+    outline-offset: 2px;
+  }
+}
+
+.modal-placeholder {
+  width: 588px;
+  min-height: 478px;
+  flex-direction: column;
+  background: var(--color-bg-primary);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 16px;
+
+  &__error {
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    &__image {
+      width: 70%;
+      max-width: 350px;
+    }
+
+    &__message {
+      text-align: center;
+      text-wrap: balance;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+
+      &__actions {
+        margin-top: 24px;
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.safety-action-modal {
+  width: 600px;
+  flex-direction: column;
+
+  &__top,
+  &__bottom {
+    display: flex;
+    gap: 8px;
+    padding: 24px;
+    flex-direction: column;
+    background: var(--color-bg-primary);
+    backdrop-filter: $backdrop-blur-filter;
+    border: 1px solid var(--color-border-primary);
+  }
+
+  &__top {
+    border-radius: 16px 16px 0 0;
+    border-bottom: 0;
+    gap: 16px;
+  }
+
+  &__bottom {
+    border-radius: 0 0 16px 16px;
+    border-top: 0;
+
+    @media screen and (max-width: $mobile-breakpoint) {
+      border-radius: 0;
+      border-bottom: 0;
+      padding-bottom: 32px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--color-text-secondary);
+
+    &__icon {
+      border-radius: 64px;
+      color: var(--color-text-on-brand-base);
+      background: var(--color-bg-brand-base);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 28px;
+      color: var(--color-text-primary);
+    }
+  }
+
+  &__confirmation {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--color-text-secondary);
+
+    h1 {
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--color-text-primary);
+      font-weight: 500;
+
+      &:not(:only-child) {
+        margin-bottom: 8px;
+      }
+    }
+
+    strong {
+      font-weight: 700;
+      color: var(--color-text-primary);
+    }
+  }
+
+  &__status {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+
+    &__account {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 8px;
+      color: var(--color-text-tertiary);
+
+      bdi {
+        color: inherit;
+      }
+    }
+
+    &__content {
+      display: -webkit-box;
+      font-size: 15px;
+      line-height: 22px;
+      color: var(--color-text-tertiary);
+      line-clamp: 4;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      max-height: 4 * 22px;
+      overflow: hidden;
+
+      p,
+      a {
+        color: inherit;
+      }
+    }
+
+    .reply-indicator__attachments {
+      margin-top: 0;
+      font-size: 15px;
+      line-height: 22px;
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  &__bullet-points {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 16px;
+    line-height: 24px;
+
+    & > div {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+
+      strong {
+        font-weight: 700;
+      }
+    }
+
+    &--deemphasized {
+      color: var(--color-text-primary);
+    }
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &__field-group {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      font-size: 16px;
+      line-height: 24px;
+      height: 32px;
+      padding: 0 12px;
+    }
+  }
+
+  &__caveats {
+    font-size: 14px;
+    padding: 0 12px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  &__bottom {
+    padding-top: 0;
+
+    &__collapsible {
+      display: none;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.active {
+      background: var(--color-bg-secondary);
+      padding-top: 24px;
+
+      .safety-action-modal__bottom__collapsible {
+        display: flex;
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: flex-end;
+
+    &__hint {
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--color-text-tertiary);
+    }
+
+    .link-button {
+      padding: 10px 12px;
+      font-weight: 600;
+    }
+  }
+}
+
+.dialog-modal {
+  width: 588px;
+  max-height: 80vh;
+  flex-direction: column;
+  background: var(--color-bg-elevated);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 16px;
+
+  &__header {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-border-primary);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    padding: 12px 24px;
+    min-height: 61px;
+
+    &__title {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      letter-spacing: 0.15px;
+    }
+  }
+
+  &__content {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    overflow-y: auto;
+
+    &__description {
+      margin: 24px 24px 0;
+      color: var(--color-text-secondary);
+
+      a {
+        color: inherit;
+      }
+    }
+
+    &__form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 24px;
+    }
+
+    &__preview {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      background: var(--color-bg-media-base);
+
+      img {
+        display: block;
+      }
+
+      img,
+      .gifv video {
+        outline: 1px solid var(--color-border-media);
+        outline-offset: -1px;
+        border-radius: 8px;
+      }
+
+      img,
+      .gifv video,
+      .video-player,
+      .audio-player {
+        max-width: 360px;
+        max-height: 45vh;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      justify-content: flex-end;
+      padding: 0 24px 24px;
+    }
+  }
+
+  &__popout {
+    background: var(--color-bg-elevated);
+    backdrop-filter: $backdrop-blur-filter;
+    border: 1px solid var(--color-border-primary);
+    box-shadow: var(--dropdown-shadow);
+    max-width: 320px;
+    padding: 16px;
+    border-radius: 8px;
+    z-index: 9999 !important;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--color-text-secondary);
+  }
+
+  .copy-paste-text {
+    margin-bottom: 0;
+  }
+}
+
+.hotkey-combination {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.boost-modal,
+.report-modal,
+.actions-modal,
+.compare-history-modal {
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  border-radius: 4px;
+  border: 1px solid var(--color-border-primary);
+  overflow: hidden;
+  max-width: 90vw;
+  width: 480px;
+  position: relative;
+  flex-direction: column;
+
+  @media screen and (max-width: $no-columns-breakpoint) {
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+.boost-modal__container {
+  overflow-y: auto;
+  padding: 10px;
+
+  .status {
+    user-select: text;
+    border-bottom: 0;
+  }
+}
+
+.report-modal {
+  width: 90vw;
+  max-width: 700px;
+  border: 1px solid var(--color-border-primary);
+}
+
+.report-dialog-modal {
+  max-width: 90vw;
+  width: 480px;
+  height: 80vh;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  border-radius: 4px;
+  border: 1px solid var(--color-border-primary);
+  overflow: hidden;
+  position: relative;
+  flex-direction: column;
+  display: flex;
+
+  &__container {
+    box-sizing: border-box;
+    border-top: 1px solid var(--color-border-primary);
+    padding: 20px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  &__title {
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
+
+    @media screen and (height <= 800px) {
+      font-size: 22px;
+    }
+  }
+
+  &__subtitle {
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 22px;
+    margin-bottom: 4px;
+  }
+
+  &__lead {
+    font-size: 17px;
+    line-height: 22px;
+    color: var(--color-text-primary);
+    margin-bottom: 30px;
+
+    a {
+      text-decoration: none;
+      color: var(--color-text-brand);
+      font-weight: 500;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__actions {
+    margin-top: 30px;
+    display: flex;
+
+    .button {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__statuses {
+    flex-grow: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .status__content a {
+    color: var(--color-text-brand);
+  }
+
+  .status__content,
+  .status__content p {
+    color: var(--color-text-primary);
+  }
+
+  .dialog-option {
+    align-items: center;
+    gap: 12px;
+  }
+
+  .dialog-option .poll__input {
+    color: var(--color-text-secondary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: var(--color-text-success);
+      border-width: 4px;
+    }
+
+    &.active {
+      color: var(--color-text-on-success-base);
+      background: var(--color-bg-success-base);
+      border-color: var(--color-bg-success-base);
+    }
+  }
+
+  .poll__option.dialog-option {
+    padding: 15px 0;
+    flex: 0 0 auto;
+    border-bottom: 1px solid var(--color-border-primary);
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    & > .poll__option__text {
+      font-size: 13px;
+      color: var(--color-text-primary);
+
+      strong {
+        font-size: 17px;
+        font-weight: 500;
+        line-height: 22px;
+        color: var(--color-text-primary);
+        display: block;
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .flex-spacer {
+    background: transparent;
+  }
+
+  &__textarea {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    color: var(--color-text-primary);
+    background: var(--color-bg-secondary);
+    padding: 10px;
+    font-family: inherit;
+    font-size: 17px;
+    line-height: 22px;
+    resize: vertical;
+    border: 0;
+    border: 1px solid var(--color-border-primary);
+    outline: 0;
+    border-radius: 4px;
+    margin: 20px 0;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    gap: 8px;
+
+    & > span {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+    }
+  }
+
+  .button.button-secondary {
+    border-color: var(--color-text-error);
+    color: var(--color-text-error);
+    flex: 0 0 auto;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-text-on-error-base);
+      background: var(--color-bg-error-base);
+      border-color: var(--color-bg-error-base);
+    }
+  }
+
+  hr {
+    border: 0;
+    background: transparent;
+    margin: 15px 0;
+  }
+
+  .emoji-mart-search {
+    padding-inline-end: 10px;
+  }
+
+  .emoji-mart-search-icon {
+    inset-inline-end: 10px + 5px;
+  }
+}
+
+.setting-divider {
+  background: transparent;
+  border: 0;
+  margin: 0;
+  width: 100%;
+  height: 1px;
+  margin-bottom: 29px;
+}
+
+.actions-modal {
+  border-radius: 8px 8px 0 0;
+  background: var(--color-bg-elevated);
+  backdrop-filter: $backdrop-blur-filter;
+  border-color: var(--color-border-primary);
+  box-shadow: var(--dropdown-shadow);
+  max-height: 80vh;
+  max-width: 80vw;
+
+  ul {
+    overflow-y: auto;
+    padding-bottom: 8px;
+  }
+
+  a,
+  button {
+    color: inherit;
+    display: flex;
+    padding: 16px;
+    font-size: 15px;
+    line-height: 21px;
+    background: transparent;
+    border: none;
+    align-items: center;
+    text-decoration: none;
+    width: 100%;
+    box-sizing: border-box;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: var(--color-bg-brand-softer);
+    }
+  }
+}
+
+.report-modal__target {
+  padding: 30px;
+  font-size: 16px;
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.report-modal__target {
+  text-align: center;
+}
+
+.report-modal__target {
+  padding: 15px;
+
+  .report-modal__close {
+    position: absolute;
+    top: 10px;
+    inset-inline-end: 10px;
+  }
+}
+
+.compare-history-modal {
+  .report-modal__target {
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+
+  &__container {
+    padding: 30px;
+    pointer-events: all;
+    overflow-y: auto;
+  }
+
+  .status__content {
+    color: var(--color-text-primary);
+    font-size: 19px;
+    line-height: 24px;
+
+    .emojione {
+      width: 24px;
+      height: 24px;
+      margin: -1px 0 0;
+    }
+
+    a {
+      color: var(--color-text-brand);
+    }
+
+    hr {
+      height: 0.25rem;
+      padding: 0;
+      background-color: var(--color-text-primary);
+      border: 0;
+      margin: 20px 0;
+    }
+  }
+
+  .media-gallery,
+  .audio-player,
+  .video-player {
+    margin-top: 15px;
+  }
+}
+
+.loading-bar {
+  background-color: var(--color-bg-brand-base);
+  height: 3px;
+  position: fixed;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: 9999;
+}
+
+.media-gallery__actions {
+  position: absolute;
+  top: 6px;
+  inset-inline-end: 6px;
+  display: flex;
+  gap: 2px;
+  z-index: 2;
+
+  &__pill {
+    display: block;
+    color: var(--color-text-on-media);
+    background: var(--color-bg-media);
+    backdrop-filter: $backdrop-blur-filter;
+    border: 0;
+    padding: 3px 12px;
+    border-radius: 99px;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+}
+
+.media-gallery__item__badges {
+  position: absolute;
+  bottom: 8px;
+  inset-inline-end: 8px;
+  display: flex;
+  gap: 2px;
+  pointer-events: none;
+}
+
+.media-gallery__alt__label,
+.relationship-tag {
+  display: block;
+  text-align: center;
+  color: var(--color-text-on-media);
+  background: var(--color-bg-media);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 0;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  z-index: 1;
+  line-height: 20px;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &--non-interactive {
+    pointer-events: none;
+  }
+}
+
+.relationship-tag {
+  text-transform: uppercase;
+  cursor: default;
+}
+
+.info-tooltip {
+  color: var(--color-text-on-media);
+  background: var(--color-bg-media);
+  backdrop-filter: $backdrop-blur-filter;
+  border-radius: 4px;
+  box-shadow: var(--dropdown-shadow);
+  padding: 16px;
+  min-width: 16em;
+  min-height: 2em;
+  max-width: 22em;
+  max-height: 30em;
+  overflow-y: auto;
+  z-index: 10;
+
+  &--solid {
+    color: var(--color-text-primary);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-primary);
+  }
+
+  h4 {
+    font-size: 15px;
+    line-height: 20px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 15px;
+    line-height: 20px;
+    opacity: 0.85;
+    white-space: pre-line;
+  }
+
+  .button {
+    margin-block-start: 8px;
+  }
+}
+
+.attachment-list {
+  display: flex;
+  font-size: 14px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  margin-top: 16px;
+  overflow: hidden;
+
+  &__icon {
+    flex: 0 0 auto;
+    color: var(--color-text-tertiary);
+    padding: 8px 18px;
+    cursor: default;
+    border-inline-end: 1px solid var(--color-border-primary);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+  }
+
+  &__list {
+    list-style: none;
+    padding: 4px 0;
+    padding-inline-start: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    li {
+      display: block;
+      padding: 4px 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: var(--color-text-tertiary);
+      font-weight: 500;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.compact {
+    border: 0;
+
+    .attachment-list__list {
+      padding: 0;
+      display: block;
+    }
+
+    .icon {
+      color: var(--color-text-tertiary);
+      vertical-align: middle;
+    }
+  }
+}
+
+/* Media Gallery */
+.media-gallery {
+  box-sizing: border-box;
+  margin-top: 8px;
+  overflow: hidden;
+  border-radius: 8px;
+  position: relative;
+  width: 100%;
+  min-height: 64px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 2px;
+
+  &--layout-2 {
+    & > .media-gallery__item:nth-child(1) {
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    & > .media-gallery__item:nth-child(2) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+
+  &--layout-3 {
+    min-height: calc(64px * 2 + 8px);
+
+    & > .media-gallery__item:nth-child(1) {
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    & > .media-gallery__item:nth-child(2) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    & > .media-gallery__item:nth-child(3) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
+
+  &--layout-4 {
+    min-height: calc(64px * 2 + 8px);
+
+    & > .media-gallery__item:nth-child(1) {
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    & > .media-gallery__item:nth-child(2) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    & > .media-gallery__item:nth-child(3) {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    & > .media-gallery__item:nth-child(4) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
+}
+
+.media-gallery__item {
+  border: 0;
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  outline: 1px solid var(--color-border-media);
+  outline-offset: -1px;
+  z-index: 1;
+
+  &--tall {
+    grid-row: span 2;
+  }
+
+  &--wide {
+    grid-column: span 2;
+  }
+
+  &--square {
+    aspect-ratio: 1;
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    padding: 8px;
+    z-index: 1;
+
+    &--corner {
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+
+    .icon {
+      color: var(--color-text-on-media);
+      filter: drop-shadow(0 0 6px var(--color-bg-media-base));
+    }
+  }
+
+  &--error img {
+    visibility: hidden;
+  }
+}
+
+.media-gallery__item-thumbnail {
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+  color: var(--color-text-primary);
+  position: relative;
+  z-index: -1;
+
+  &,
+  img {
+    height: 100%;
+    width: 100%;
+  }
+
+  img {
+    object-fit: cover;
+  }
+}
+
+.media-gallery__preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: -2;
+  background: var(--color-bg-overlay);
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.media-gallery__gifv {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  z-index: -1;
+}
+
+.media-gallery__item-gifv-thumbnail {
+  cursor: pointer;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+/* End Media Gallery */
+
+.detailed,
+.fullscreen {
+  .video-player__volume__current,
+  .video-player__volume::before {
+    bottom: 27px;
+  }
+
+  .video-player__volume__handle {
+    bottom: 23px;
+  }
+}
+
+.audio-player {
+  /* These are only fallback values, the AudioPlayer component inserts
+   * the real colours dynamically as inline styles */
+  --player-foreground-color: var(--color-text-on-media);
+  --player-background-color: var(--color-bg-media-base);
+  --player-accent-color: var(--color-text-brand);
+
+  box-sizing: border-box;
+  container: audio-player / inline-size;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  color: var(--player-foreground-color);
+  background: var(--player-background-color);
+  border-radius: 8px;
+  outline: 1px solid var(--color-border-media);
+  outline-offset: -1px;
+
+  &__controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    height: 100%;
+
+    &__play {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .player-button {
+        position: absolute;
+        top: 50%;
+        inset-inline-start: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .icon {
+        filter: var(--overlay-icon-shadow);
+      }
+    }
+
+    .player-button {
+      display: inline-block;
+      outline: 0;
+      padding: 5px;
+      flex: 0 0 auto;
+      background: transparent;
+      border: 0;
+      color: var(--player-foreground-color);
+      opacity: 0.75;
+
+      .icon {
+        width: 48px;
+        height: 48px;
+      }
+
+      &:active,
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__visualizer {
+    width: 100%;
+    max-width: 200px;
+  }
+
+  .video-player__seek {
+    position: absolute;
+    inset: 0 0 auto;
+    height: 24px;
+    z-index: 1; /* Ensure this renders on top of audio player controls */
+  }
+
+  &.inactive {
+    .video-player__seek,
+    .audio-player__controls,
+    .video-player__controls {
+      visibility: hidden;
+    }
+  }
+
+  .video-player__volume::before,
+  .video-player__seek::before {
+    background: currentColor;
+    opacity: 0.15;
+  }
+
+  .video-player__seek__buffer {
+    background: currentColor;
+    opacity: 0.2;
+  }
+
+  .video-player__seek__progress,
+  .video-player__seek__handle,
+  .video-player__volume__current,
+  .video-player__volume__handle {
+    background-color: var(--player-accent-color);
+  }
+
+  .video-player__buttons button,
+  .video-player__buttons a {
+    color: currentColor;
+    opacity: 0.75;
+
+    &:active,
+    &:hover,
+    &:focus {
+      color: currentColor;
+      opacity: 1;
+    }
+  }
+
+  .video-player__time-sep,
+  .video-player__time-total,
+  .video-player__time-current {
+    color: currentColor;
+  }
+
+  @container audio-player (max-width: 400px) {
+    .video-player__time,
+    .player-button.video-player__download__icon {
+      display: none;
+    }
+  }
+
+  .video-player__seek::before,
+  .video-player__seek__buffer,
+  .video-player__seek__progress {
+    top: 0;
+  }
+
+  .video-player__seek__handle {
+    top: -4px;
+  }
+
+  .video-player__controls {
+    padding-top: 10px;
+    background: transparent;
+    z-index: 1;
+  }
+}
+
+.video-player {
+  overflow: hidden;
+  position: relative;
+  color: var(--color-text-on-media);
+  background: var(--color-bg-media);
+  max-width: 100%;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  outline: 1px solid var(--color-border-media);
+  outline-offset: -1px;
+  z-index: 2;
+
+  video {
+    display: block;
+    z-index: -2;
+  }
+
+  &.fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0;
+    aspect-ratio: auto !important;
+    outline: none;
+    border-radius: 0;
+
+    video {
+      width: 100% !important;
+      height: 100% !important;
+      outline: 0;
+    }
+  }
+
+  &__controls {
+    position: absolute;
+    direction: ltr;
+    z-index: -1;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    box-sizing: border-box;
+    background: linear-gradient(
+      0deg,
+      rgb(from var(--color-bg-media-base) r g b / 85%) 0,
+      rgb(from var(--color-bg-media-base) r g b / 45%) 60%,
+      transparent
+    );
+    padding: 0 15px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.1s ease;
+    will-change: opacity, pointer-events;
+
+    &.active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .media-gallery__actions {
+    opacity: 0;
+    transition: opacity 0.1s ease;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &.inactive {
+    video,
+    .video-player__controls {
+      visibility: hidden;
+    }
+  }
+
+  &__spoiler {
+    display: none;
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+    border: 0;
+    background: var(--color-bg-primary);
+    color: var(--color-text-secondary);
+    transition: none;
+    pointer-events: none;
+
+    &.active {
+      display: block;
+      pointer-events: auto;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: color-mix(
+          in oklab,
+          var(--color-text-primary),
+          var(--color-text-secondary)
+        );
+      }
+    }
+
+    &__title {
+      display: block;
+      font-size: 14px;
+    }
+
+    &__subtitle {
+      display: block;
+      font-size: 11px;
+      font-weight: 500;
+    }
+  }
+
+  &__buttons-bar {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    margin: 0 -5px;
+
+    .video-player__download__icon {
+      color: inherit;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 30px;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    gap: 5px;
+
+    .player-button {
+      display: inline-block;
+      outline: 0;
+      padding: 5px;
+      flex: 0 0 auto;
+      background: transparent;
+      border: 0;
+      color: rgb(from var(--color-text-on-media) r g b / 75%);
+      font-weight: 500;
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: var(--color-text-on-media);
+      }
+    }
+  }
+
+  &__time {
+    display: inline;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 5px;
+
+    // Ensure digits maintain a consistent width
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__time-sep,
+  &__time-total,
+  &__time-current {
+    color: var(--color-text-on-media);
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__time-sep {
+    display: inline-block;
+    margin: 0 6px;
+  }
+
+  &__volume {
+    flex: 0 0 auto;
+    display: inline-flex;
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+    overflow: hidden;
+
+    .no-reduce-motion & {
+      transition: all 100ms linear;
+    }
+
+    &.active {
+      overflow: visible;
+      width: 50px;
+      margin-inline-end: 16px;
+    }
+
+    &::before {
+      content: '';
+      width: 50px;
+      background: rgb(from var(--color-text-on-media) r g b / 35%);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      inset-inline-start: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &__current {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      inset-inline-start: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+      background: var(--color-text-on-media);
+    }
+
+    &__handle {
+      position: absolute;
+      z-index: 3;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 50%;
+      inset-inline-start: 0;
+      margin-inline-start: -6px;
+      transform: translate(0, -50%);
+      background: var(--color-text-on-media);
+      box-shadow: 1px 2px 6px var(--color-shadow-primary);
+      opacity: 0;
+
+      .no-reduce-motion & {
+        transition: opacity 100ms linear;
+      }
+    }
+
+    &.active &__handle {
+      opacity: 1;
+    }
+  }
+
+  &__link {
+    padding: 2px 10px;
+
+    a {
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-on-media);
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__seek {
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 100%;
+      background: rgb(from var(--color-text-on-media) r g b / 35%);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      top: 14px;
+    }
+
+    &__progress,
+    &__buffer {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      top: 14px;
+      background: var(--color-text-on-media);
+    }
+
+    &__buffer {
+      background: rgb(from var(--color-text-on-media) r g b / 20%);
+    }
+
+    &__handle {
+      position: absolute;
+      z-index: 3;
+      opacity: 0;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 10px;
+      margin-inline-start: -6px;
+      background: var(--color-text-on-media);
+      box-shadow: 1px 2px 6px var(--color-shadow-primary);
+
+      .no-reduce-motion & {
+        transition: opacity 0.1s ease;
+      }
+
+      &.active {
+        opacity: 1;
+        cursor: grabbing;
+      }
+    }
+
+    &:hover {
+      .video-player__seek__handle {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__hotkey-indicator {
+    position: absolute;
+    top: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--color-text-on-media);
+    background: var(--color-bg-media);
+    backdrop-filter: $backdrop-blur-filter;
+    border-radius: 8px;
+    padding: 16px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    &__label {
+      font-size: 15px;
+      font-weight: 500;
+    }
+  }
+
+  &.detailed,
+  &.fullscreen {
+    .video-player__buttons {
+      .player-button {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+  }
+}
+
+.gifv {
+  position: relative;
+
+  canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  video {
+    max-width: 100vw;
+    max-height: 80vh;
+  }
+}
+
+.scrollable .account-card {
+  margin: 10px;
+}
+
+.scrollable .account-card__title__avatar {
+  img {
+    border: 2px solid var(--color-bg-primary);
+  }
+
+  .account__avatar {
+    border: none;
+  }
+}
+
+.scrollable .account-card__header {
+  img {
+    border-radius: 4px;
+  }
+}
+
+.scrollable .account-card__bio::after {
+  background: linear-gradient(to left, var(--color-bg-primary), transparent);
+}
+
+.account-gallery__container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2px;
+
+  .media-gallery__item {
+    border-radius: 0;
+  }
+
+  .load-more,
+  .timeline-hint {
+    grid-column: span 3;
+  }
+}
+
+.notification__filter-bar,
+.account__section-headline {
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+  cursor: default;
+  display: flex;
+  flex-shrink: 0;
+
+  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+    border-right: 0;
+    border-left: 0;
+  }
+
+  button {
+    background: transparent;
+    border: 0;
+    margin: 0;
+  }
+
+  button,
+  a {
+    display: block;
+    flex: 1 1 auto;
+    color: var(--color-text-secondary);
+    padding: 15px 0;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    text-decoration: none;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+
+    &.active {
+      color: var(--color-text-primary);
+
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 3px;
+        border-radius: 4px 4px 0 0;
+        background: var(--color-text-brand);
+      }
+    }
+  }
+
+  .scrollable & {
+    border-left: 0;
+    border-right: 0;
+  }
+}
+
+.filter-form {
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &__column {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px;
+  }
+
+  .radio-button {
+    display: flex;
+  }
+}
+
+.column-settings__row .radio-button {
+  display: flex;
+}
+
+.radio-button,
+.check-box {
+  font-size: 14px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  gap: 10px;
+  color: var(--color-text-primary);
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  &__input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border: 2px solid var(--color-text-primary);
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 auto;
+    border-radius: 50%;
+
+    &.checked,
+    &.indeterminate {
+      border-color: var(--color-text-brand);
+    }
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.radio-button__input.checked::before {
+  content: '';
+  display: block;
+  border-radius: 50%;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  background: var(--color-text-brand);
+}
+
+.check-box {
+  &__input {
+    width: 18px;
+    height: 18px;
+    border-radius: 2px;
+
+    &.checked,
+    &.indeterminate {
+      background: var(--color-bg-brand-base);
+      color: var(--color-text-on-brand-base);
+    }
+  }
+}
+
+noscript {
+  text-align: center;
+
+  img {
+    width: 200px;
+    opacity: 0.5;
+    animation: flicker 4s infinite;
+  }
+
+  div {
+    font-size: 14px;
+    margin: 30px auto;
+    color: var(--color-text-primary);
+    max-width: 400px;
+
+    a {
+      color: var(--color-text-brand);
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 0.75;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.moved-account-banner,
+.follow-request-banner,
+.account-memorial-banner {
+  padding: 20px;
+  background: var(--color-bg-tertiary);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  &__message {
+    color: var(--color-text-secondary);
+    padding: 8px 0;
+    padding-top: 0;
+    padding-bottom: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 16px;
+  }
+
+  &__action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 15px;
+    width: 100%;
+  }
+
+  .detailed-status__display-name {
+    margin-bottom: 0;
+  }
+}
+
+.follow-request-banner .button {
+  width: 100%;
+}
+
+.account-memorial-banner__message {
+  margin-bottom: 0;
+}
+
+.column-inline-form {
+  padding: 15px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  align-items: center;
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+
+  label {
+    flex: 1 1 auto;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+  }
+}
+
+.drawer__backdrop {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(from var(--color-bg-overlay) r g b / 50%);
+}
+
+.focal-point {
+  position: relative;
+  cursor: grab;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+
+  &__reticle {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    transform: translate(-50%, -50%);
+    border: 2px solid var(--color-text-on-media);
+    border-radius: 50%;
+    box-shadow: 0 0 0 9999em var(--color-shadow-primary);
+    pointer-events: none;
+  }
+}
+
+.account__header__content {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  word-break: normal;
+  overflow-wrap: break-word;
+
+  p {
+    margin-bottom: 20px;
+    unicode-bidi: plaintext;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.account__header {
+  overflow: hidden;
+  container: account-header / inline-size;
+
+  &.inactive {
+    opacity: 0.5;
+
+    .account__header__image,
+    .account__avatar {
+      filter: grayscale(100%);
+    }
+  }
+
+  &__info {
+    position: absolute;
+    top: 20px;
+    inset-inline-end: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  &__image {
+    overflow: hidden;
+    height: 145px;
+    position: relative;
+    background: var(--color-bg-tertiary);
+    border-bottom: 1px solid var(--color-border-primary);
+
+    img {
+      object-fit: cover;
+      display: block;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  }
+
+  &__bar {
+    position: relative;
+    padding: 0 20px;
+    border-bottom: 1px solid var(--color-border-primary);
+
+    .avatar {
+      display: block;
+      flex: 0 0 auto;
+
+      .account__avatar {
+        background: var(--color-bg-primary);
+        border: 1px solid var(--color-border-primary);
+        border-radius: var(--avatar-border-radius);
+      }
+    }
+  }
+
+  &__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .account-role {
+      line-height: unset;
+    }
+  }
+
+  &__tabs {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-top: -55px;
+    padding-top: 10px;
+    gap: 8px;
+    overflow: hidden;
+    margin-inline-start: -2px; // aligns the pfp with content below
+
+    &__name {
+      margin-top: 16px;
+      margin-bottom: 16px;
+
+      .emojione {
+        width: 22px;
+        height: 22px;
+      }
+
+      h1 {
+        font-size: 17px;
+        line-height: 22px;
+        color: var(--color-text-primary);
+        font-weight: 600;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        small {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 14px;
+          line-height: 20px;
+          color: var(--color-text-secondary);
+          font-weight: 400;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            user-select: all;
+          }
+
+          .icon-lock {
+            height: 18px;
+            width: 18px;
+          }
+        }
+      }
+    }
+
+    .spacer {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__follow-button {
+    flex-grow: 1;
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    $button-breakpoint: 420px;
+    $button-fallback-breakpoint: #{$button-breakpoint} + 55px;
+
+    &--desktop {
+      margin-top: 55px;
+
+      @container (width < #{$button-breakpoint}) {
+        display: none;
+      }
+
+      @supports (not (container-type: inline-size)) {
+        @media (max-width: #{$button-fallback-breakpoint}) {
+          display: none;
+        }
+      }
+    }
+
+    &--mobile {
+      margin-block: 16px;
+
+      @container (width >= #{$button-breakpoint}) {
+        display: none;
+      }
+
+      @supports (not (container-type: inline-size)) {
+        @media (min-width: (#{$button-fallback-breakpoint} + 1px)) {
+          display: none;
+        }
+      }
+    }
+
+    .button {
+      flex-shrink: 1;
+      white-space: nowrap;
+      min-width: 80px;
+    }
+
+    .icon-button {
+      border: 1px solid var(--color-border-primary);
+      border-radius: 4px;
+      box-sizing: content-box;
+      padding: 5px;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      &.copied {
+        border-color: var(--color-text-success);
+      }
+    }
+  }
+
+  &__bio {
+    .account__header__content {
+      color: var(--color-text-primary);
+    }
+
+    .account__header__fields {
+      margin: 0;
+      margin-top: 16px;
+      border-radius: 4px;
+      border: 1px solid var(--color-border-primary);
+
+      dl {
+        display: block;
+        padding: 11px 16px;
+        border-bottom-color: var(--color-border-primary);
+      }
+
+      dd,
+      dt {
+        font-size: 13px;
+        line-height: 18px;
+        padding: 0;
+        text-align: initial;
+      }
+
+      dt {
+        width: auto;
+        background: transparent;
+        text-transform: uppercase;
+        color: var(--color-text-tertiary);
+      }
+
+      dd {
+        color: var(--color-text-secondary);
+      }
+
+      a {
+        color: var(--color-text-brand);
+      }
+
+      .icon {
+        width: 18px;
+        height: 18px;
+      }
+
+      .verified {
+        border: 1px solid var(--color-text-success);
+        margin-top: -1px;
+        margin-inline: -1px;
+
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+          margin-bottom: -1px;
+        }
+
+        dt,
+        dd {
+          color: var(--color-text-success);
+        }
+
+        dd {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          span {
+            display: flex;
+          }
+        }
+
+        a {
+          color: var(--color-text-success);
+        }
+      }
+    }
+  }
+
+  &__extra {
+    margin-top: 16px;
+
+    &__links {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      margin: 0 -10px;
+      padding-top: 16px;
+      padding-bottom: 10px;
+
+      a {
+        display: inline-block;
+        color: var(--color-text-secondary);
+        text-decoration: none;
+        padding: 5px 10px;
+        font-weight: 500;
+
+        strong {
+          font-weight: 700;
+          color: var(--color-text-primary);
+        }
+      }
+    }
+  }
+
+  &__account-note {
+    color: var(--color-text-primary);
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 10px;
+
+    &__loading-indicator-wrapper {
+      position: relative;
+      height: 37px;
+
+      .loading-indicator {
+        left: 10px;
+      }
+
+      .circular-progress {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
+    label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      margin-bottom: 5px;
+    }
+
+    textarea {
+      display: block;
+      box-sizing: border-box;
+      width: calc(100% + 20px);
+      color: var(--color-text-primary);
+      background: transparent;
+      padding: 10px;
+      margin: 0 -10px;
+      font-family: inherit;
+      font-size: 14px;
+      resize: none;
+      border: 0;
+      outline: 0;
+      border-radius: 4px;
+
+      &::placeholder {
+        color: var(--color-text-tertiary);
+        opacity: 1;
+      }
+
+      &:focus {
+        background: var(--color-bg-brand-softer);
+      }
+    }
+  }
+
+  &__familiar-followers {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-block: 16px;
+    color: var(--color-text-secondary);
+
+    a:any-link {
+      font-weight: 500;
+      text-decoration: none;
+      color: var(--color-text-primary);
+    }
+  }
+}
+
+.account__contents {
+  overflow: hidden;
+}
+
+.account__details {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+}
+
+.verified-badge {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-success);
+  gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  a {
+    color: inherit;
+    font-weight: 500;
+    text-decoration: none;
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.trends {
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid var(--color-border-primary);
+    gap: 8px;
+
+    &__name {
+      flex: 1 1 auto;
+      color: var(--color-text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      strong {
+        font-weight: 500;
+      }
+
+      a {
+        color: var(--color-text-primary);
+        text-decoration: none;
+        font-size: 14px;
+        font-weight: 500;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover,
+        &:focus,
+        &:active {
+          span {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    &__current {
+      flex: 0 0 auto;
+      font-size: 24px;
+      font-weight: 500;
+      text-align: end;
+      color: var(--color-text-primary);
+      text-decoration: none;
+    }
+
+    &__sparkline {
+      flex: 0 0 auto;
+      width: 50px;
+
+      path:first-child {
+        fill: var(--color-graph-primary-fill) !important;
+        fill-opacity: 1 !important;
+      }
+
+      path:last-child {
+        stroke: var(--color-graph-primary-stroke) !important;
+        fill: none !important;
+      }
+    }
+
+    &--requires-review {
+      .trends__item__name {
+        color: var(--color-text-warning);
+
+        a {
+          color: var(--color-text-warning);
+        }
+      }
+
+      .trends__item__current {
+        color: var(--color-text-warning);
+      }
+
+      .trends__item__sparkline {
+        path:first-child {
+          fill: var(--color-graph-warning-fill) !important;
+        }
+
+        path:last-child {
+          stroke: var(--color-graph-warning-stroke) !important;
+        }
+      }
+    }
+
+    &--disabled {
+      .trends__item__name {
+        color: var(--color-text-disabled);
+
+        a {
+          color: var(--color-text-disabled);
+        }
+      }
+
+      .trends__item__current {
+        color: var(--color-text-disabled);
+      }
+
+      .trends__item__sparkline {
+        path:first-child {
+          fill: var(--color-graph-disabled-fill) !important;
+        }
+
+        path:last-child {
+          stroke: var(--color-graph-disabled-stroke) !important;
+        }
+      }
+    }
+  }
+
+  &--compact &__item {
+    padding: 12px;
+  }
+}
+
+.conversation {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-primary);
+  padding: 5px;
+  padding-bottom: 0;
+
+  &:focus {
+    background: var(--color-bg-secondary);
+    outline: 0;
+  }
+
+  &__avatar {
+    flex: 0 0 auto;
+    padding: 10px;
+    padding-top: 12px;
+    position: relative;
+    cursor: pointer;
+  }
+
+  &__unread {
+    display: inline-block;
+    background: var(--color-text-brand);
+    border-radius: 50%;
+    width: 0.625rem;
+    height: 0.625rem;
+    margin: -0.1ex 0.15em 0.1ex;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    padding: 10px 5px;
+    padding-inline-end: 15px;
+    overflow: hidden;
+
+    &__info {
+      overflow: hidden;
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    &__relative-time {
+      font-size: 15px;
+      color: var(--color-text-secondary);
+      padding-inline-start: 15px;
+    }
+
+    &__names {
+      color: var(--color-text-secondary);
+      font-size: 15px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 4px;
+      flex-basis: 90px;
+      flex-grow: 1;
+
+      a {
+        color: var(--color-text-primary);
+        text-decoration: none;
+
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    a {
+      overflow-wrap: anywhere;
+    }
+  }
+}
+
+.announcements {
+  width: calc(100% - 124px);
+  flex: 0 0 auto;
+  position: relative;
+  overflow: hidden;
+
+  .layout-multiple-columns & {
+    width: 100%;
+  }
+
+  @media screen and (max-width: (124px + 300px)) {
+    width: 100%;
+  }
+
+  &__root {
+    background: var(--color-bg-brand-softer);
+    font-size: 13px;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  &__mastodon {
+    width: 124px;
+    flex: 0 0 auto;
+
+    @media screen and (max-width: (124px + 300px)) {
+      display: none;
+    }
+  }
+
+  &__slides {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: start;
+  }
+
+  &__slide {
+    box-sizing: border-box;
+    width: 100%;
+    flex: 0 0 100%;
+    padding: 15px;
+    position: relative;
+    font-size: 15px;
+    line-height: 20px;
+    overflow-wrap: break-word;
+    font-weight: 400;
+    max-height: 50vh;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  &__range {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 10px;
+    padding-inline-end: 18px;
+  }
+
+  &__unread {
+    position: absolute;
+    top: 19px;
+    inset-inline-end: 19px;
+    display: block;
+    background: var(--color-text-brand);
+    border-radius: 50%;
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &__pagination {
+    padding: 15px;
+    color: var(--color-text-secondary);
+    position: absolute;
+    bottom: 3px;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+  }
+}
+
+.layout-multiple-columns .announcements__mastodon {
+  display: none;
+}
+
+.layout-multiple-columns .announcements__container {
+  width: 100%;
+}
+
+.reactions-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 15px;
+  margin-inline-start: -2px;
+  width: calc(100% - (90px - 33px));
+
+  &__item {
+    flex-shrink: 0;
+    background: var(--color-bg-brand-softer);
+    color: color-mix(
+      in oklab,
+      var(--color-text-primary),
+      var(--color-text-secondary)
+    );
+    border: 1px solid var(--color-border-on-bg-brand-softer);
+    border-radius: 3px;
+    box-sizing: border-box;
+    margin: 2px;
+    cursor: pointer;
+    user-select: none;
+    padding: 0 6px;
+    display: flex;
+    align-items: center;
+    transition: all 100ms ease-in;
+    transition-property: background-color, color;
+
+    &__emoji {
+      display: block;
+      margin: 3px 0;
+      width: 16px;
+      height: 16px;
+
+      img {
+        display: block;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        min-width: auto;
+        min-height: auto;
+        object-fit: contain;
+      }
+    }
+
+    &__count {
+      display: block;
+      min-width: 9px;
+      font-size: 13px;
+      font-weight: 500;
+      text-align: center;
+      margin-inline-start: 6px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-text-primary);
+      background: var(--color-bg-brand-soft);
+      transition: all 200ms ease-out;
+      transition-property: background-color, color;
+    }
+
+    &.active {
+      color: var(--color-text-brand);
+      background-color: var(--color-bg-brand-softer);
+      border-color: var(--color-text-brand);
+      transition: all 100ms ease-in;
+      transition-property: background-color, color;
+    }
+  }
+
+  .emoji-picker-dropdown {
+    display: flex;
+    margin: 2px;
+  }
+
+  &:hover .emoji-button {
+    opacity: 0.85;
+  }
+
+  .emoji-button {
+    color: var(--color-text-secondary);
+    margin: 0;
+    font-size: 16px;
+    width: auto;
+    flex-shrink: 0;
+    padding: 0 6px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    opacity: 0.5;
+    transition: all 100ms ease-in;
+    transition-property: background-color, color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+      color: color-mix(
+        in oklab,
+        var(--color-text-primary),
+        var(--color-text-secondary)
+      );
+      transition: all 200ms ease-out;
+      transition-property: background-color, color;
+    }
+  }
+
+  &--empty {
+    .emoji-button {
+      padding: 0;
+    }
+  }
+}
+
+.notification,
+.status__wrapper,
+.conversation {
+  position: relative;
+
+  // When scrolling these elements into view, take into account
+  // the column header height
+  scroll-margin-top: var(--column-header-height, 0);
+
+  &.unread {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      inset-inline-start: 0;
+      width: 100%;
+      height: 100%;
+      border-inline-start: 4px solid var(--color-text-brand);
+      pointer-events: none;
+    }
+  }
+}
+
+.picture-in-picture {
+  position: fixed;
+  bottom: 20px;
+  inset-inline-end: 20px;
+  width: 300px;
+  box-shadow: var(--dropdown-shadow);
+
+  &__footer {
+    border-radius: 0 0 4px 4px;
+    background: var(--color-bg-secondary);
+    backdrop-filter: $backdrop-blur-filter;
+    border: 1px solid var(--color-border-primary);
+    border-top: 0;
+    padding: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__header {
+    border-radius: 4px 4px 0 0;
+    background: var(--color-bg-secondary);
+    backdrop-filter: $backdrop-blur-filter;
+    border: 1px solid var(--color-border-primary);
+    border-bottom: 0;
+    padding: 12px;
+    display: flex;
+    justify-content: space-between;
+
+    .icon-button {
+      padding: 6px;
+    }
+
+    &__account {
+      display: flex;
+      text-decoration: none;
+      overflow: hidden;
+    }
+
+    .account__avatar {
+      margin-inline-end: 8px;
+    }
+
+    .display-name {
+      color: var(--color-text-primary);
+      text-decoration: none;
+
+      strong,
+      span {
+        display: block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      span {
+        color: var(--color-text-secondary);
+      }
+    }
+  }
+
+  .video-player,
+  .audio-player {
+    border-radius: 0;
+  }
+}
+
+.picture-in-picture-placeholder {
+  border-radius: 8px;
+  box-sizing: border-box;
+  border: 1px dashed var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  font-size: 15px;
+  line-height: 21px;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--color-text-tertiary);
+  aspect-ratio: 16 / 9;
+
+  .icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 8px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: var(--color-text-secondary);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+    border-color: transparent;
+  }
+}
+
+.notifications-permission-banner {
+  padding: 30px;
+  border-bottom: 1px solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    inset-inline-end: 10px;
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 15px;
+    text-align: center;
+  }
+
+  p {
+    color: var(--color-text-secondary);
+    margin-bottom: 15px;
+    text-align: center;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.explore__search-header {
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+  border-bottom: 0;
+  padding: 16px;
+  padding-bottom: 8px;
+
+  .search {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .search__input {
+    padding-block: 12px;
+    padding-inline-end: 30px;
+  }
+
+  .search__popout {
+    border: 1px solid var(--color-border-primary);
+  }
+
+  .search__icon {
+    top: 12px;
+    inset-inline-end: 12px;
+    color: var(--color-text-tertiary);
+  }
+}
+
+.layout-single-column .explore__search-header {
+  display: none;
+
+  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+    display: flex;
+  }
+}
+
+.explore__search-results {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border: 1px solid var(--color-border-primary);
+    border-top: 0;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
+.story {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-primary);
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border-primary);
+  gap: 16px;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &__details {
+    flex: 1 1 auto;
+
+    &__publisher {
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    &__title {
+      display: block;
+      font-size: 19px;
+      line-height: 24px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      text-decoration: none;
+      color: var(--color-text-primary);
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: var(--color-text-brand);
+      }
+    }
+
+    &__shared {
+      display: flex;
+      align-items: baseline;
+      color: var(--color-text-secondary);
+      gap: 8px;
+      justify-content: space-between;
+      font-size: 14px;
+      line-height: 20px;
+
+      &__pill {
+        background: var(--color-bg-tertiary);
+        border-radius: 4px;
+        color: inherit;
+        text-decoration: none;
+        padding: 4px 12px;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 16px;
+        flex-shrink: 0;
+      }
+
+      &__author-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--color-text-primary);
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:active,
+        &:focus {
+          color: var(--color-text-brand);
+        }
+      }
+    }
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  &__thumbnail {
+    flex: 0 0 auto;
+    position: relative;
+    width: 120px;
+    aspect-ratio: 1;
+
+    .skeleton {
+      width: 100%;
+      height: 100%;
+    }
+
+    img {
+      border-radius: 8px;
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &__preview {
+      border-radius: 8px;
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+      position: absolute;
+      top: 0;
+      inset-inline-start: 0;
+      z-index: 0;
+
+      &--hidden {
+        display: none;
+      }
+    }
+  }
+
+  &.expanded {
+    flex-direction: column;
+
+    .story__thumbnail {
+      order: 1;
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1.91 / 1;
+    }
+
+    .story__details {
+      order: 2;
+      width: 100%;
+      flex: 0 0 auto;
+    }
+  }
+}
+
+.server-banner {
+  &__introduction {
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--color-text-secondary);
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 700;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &__hero {
+    display: block;
+    border-radius: 4px;
+    width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+    aspect-ratio: 1.9;
+    border: 0;
+    background: var(--color-bg-tertiary);
+    object-fit: cover;
+  }
+
+  &__description {
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--color-text-secondary);
+    margin-bottom: 20px;
+  }
+
+  &__meta {
+    display: flex;
+    gap: 10px;
+    max-width: 100%;
+
+    &__column {
+      flex: 0 0 auto;
+      width: calc(50% - 5px);
+      overflow: hidden;
+    }
+  }
+
+  &__number {
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-size: 14px;
+  }
+
+  &__number-label {
+    color: var(--color-text-secondary);
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  h4 {
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-inline-start: 0;
+  }
+
+  .spacer {
+    margin: 10px 0;
+  }
+}
+
+.safety-action-modal,
+.interaction-modal {
+  max-width: 100vw;
+  width: 600px;
+  overflow-y: auto;
+}
+
+.interaction-modal {
+  overflow: visible;
+  position: relative;
+  display: block;
+  border-radius: 16px;
+  background: var(--color-bg-primary);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 1px solid var(--color-border-primary);
+  padding: 24px;
+  box-sizing: border-box;
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    border-radius: 16px 16px 0 0;
+    border-bottom: 0;
+    padding-bottom: 32px;
+  }
+
+  h3 {
+    font-size: 22px;
+    line-height: 33px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  p {
+    text-align: center;
+    font-size: 17px;
+    line-height: 22px;
+    color: var(--color-text-secondary);
+
+    strong {
+      color: var(--color-text-primary);
+      font-weight: 700;
+    }
+  }
+
+  p.hint {
+    margin-bottom: 14px;
+    font-size: 14px;
+  }
+
+  &__lead {
+    margin-bottom: 20px;
+
+    h3 {
+      margin-bottom: 15px;
+    }
+  }
+
+  &__login {
+    position: relative;
+    margin-bottom: 20px;
+
+    &__input {
+      @include search-input;
+
+      border: 1px solid var(--color-border-primary);
+      padding: 4px 6px;
+      color: var(--color-text-primary);
+      font-size: 16px;
+      line-height: 18px;
+      display: flex;
+      align-items: center;
+
+      input {
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        border: 0;
+        padding: 15px - 4px 15px - 6px;
+        flex: 1 1 auto;
+        min-width: 0;
+
+        &::placeholder {
+          color: color-mix(
+            in oklab,
+            var(--color-text-primary),
+            var(--color-text-secondary)
+          );
+        }
+
+        &:focus {
+          outline: 0;
+        }
+      }
+
+      .button {
+        flex: 0 0 auto;
+      }
+    }
+
+    .search__popout {
+      margin-top: -1px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      border: 1px solid var(--color-border-primary);
+    }
+
+    &.invalid &__input {
+      border-color: var(--color-text-error);
+    }
+
+    &.expanded .search__popout {
+      display: block;
+    }
+
+    &.expanded &__input {
+      border-radius: 4px 4px 0 0;
+    }
+  }
+
+  &__choices {
+    display: flex;
+    gap: 40px;
+
+    &__choice {
+      flex: 1;
+      box-sizing: border-box;
+
+      h3 {
+        margin-bottom: 20px;
+      }
+
+      p {
+        color: var(--color-text-secondary);
+        margin-bottom: 20px;
+        font-size: 15px;
+      }
+
+      .button {
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+    &__choices {
+      flex-direction: column;
+
+      &__choice {
+        margin-top: 40px;
+      }
+    }
+  }
+
+  .link-button {
+    font-size: inherit;
+    display: inline;
+  }
+}
+
+.privacy-policy {
+  padding: 20px;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__body {
+    margin-top: 20px;
+  }
+}
+
+.prose {
+  color: var(--color-text-primary);
+  font-size: 15px;
+  line-height: 22px;
+
+  p,
+  ul,
+  ol {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  img {
+    margin-top: 2em;
+    margin-bottom: 2em;
+    max-width: 100%;
+  }
+
+  video {
+    margin-top: 2em;
+    margin-bottom: 2em;
+    max-width: 100%;
+  }
+
+  figure {
+    margin-top: 2em;
+    margin-bottom: 2em;
+
+    figcaption {
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
+    }
+  }
+
+  figure > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    margin-top: 0;
+    margin-bottom: 1em;
+    line-height: 1.33;
+  }
+
+  h2 {
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
+
+  ol {
+    counter-reset: list-counter;
+  }
+
+  li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  ol > li {
+    counter-increment: list-counter;
+
+    &::before {
+      content: counter(list-counter) '.';
+      position: absolute;
+      inset-inline-start: 0;
+    }
+  }
+
+  ul > li::before {
+    content: '';
+    position: absolute;
+    background-color: var(--color-text-secondary);
+    border-radius: 50%;
+    width: 0.375em;
+    height: 0.375em;
+    top: 0.5em;
+    inset-inline-start: 0.25em;
+  }
+
+  ul > li,
+  ol > li {
+    position: relative;
+    padding-inline-start: 1.75em;
+  }
+
+  & > ul > li p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  & > ul > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ul > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  & > ol > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ol > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b {
+    color: var(--color-text-primary);
+    font-weight: 700;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: underline;
+
+    &:focus,
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  code {
+    font-size: 0.875em;
+    background: var(--color-bg-secondary);
+    border-radius: 4px;
+    padding: 0.2em 0.3em;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid var(--color-border-primary);
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  hr + * {
+    margin-top: 0;
+  }
+
+  h2 + * {
+    margin-top: 0;
+  }
+
+  h3 + * {
+    margin-top: 0;
+  }
+
+  h4 + *,
+  h5 + *,
+  h6 + * {
+    margin-top: 0;
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.dismissable-banner,
+.warning-banner {
+  position: relative;
+  margin: 10px;
+  margin-bottom: 5px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-on-bg-brand-softer);
+  background: var(--color-bg-brand-softer);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &__background-image {
+    width: 125%;
+    position: absolute;
+    bottom: -25%;
+    inset-inline-end: -25%;
+    z-index: -1;
+    opacity: 0.15;
+    mix-blend-mode: luminosity;
+  }
+
+  &__message {
+    flex: 1 1 auto;
+    padding: 15px;
+    font-size: 15px;
+    line-height: 22px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+
+    p {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h1 {
+      color: var(--color-text-brand);
+      font-size: 22px;
+      line-height: 33px;
+      font-weight: 700;
+      margin-bottom: 15px;
+    }
+
+    &__actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+
+      &__wrapper {
+        display: flex;
+        margin-top: 30px;
+      }
+
+      .button {
+        display: block;
+        flex-grow: 1;
+      }
+    }
+  }
+
+  &__action {
+    float: right;
+    padding: 15px 10px;
+
+    .icon-button {
+      color: var(--color-text-brand);
+    }
+  }
+}
+
+.warning-banner {
+  border: 1px solid var(--color-border-on-bg-error-softer);
+  background: var(--color-bg-error-softer);
+
+  &__message {
+    h1 {
+      color: var(--color-text-error);
+    }
+
+    a {
+      color: var(--color-text-primary);
+    }
+  }
+}
+
+.image {
+  position: relative;
+  overflow: hidden;
+
+  &__preview {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.loaded &__preview {
+    display: none;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: 0;
+    background: transparent;
+    opacity: 0;
+  }
+
+  &.loaded img {
+    opacity: 1;
+  }
+}
+
+.link-footer {
+  flex: 0 0 auto;
+  padding-top: 20px;
+  z-index: 1;
+  font-size: 13px;
+
+  .column & {
+    padding: 15px;
+  }
+
+  p {
+    color: var(--color-text-secondary);
+    margin-bottom: 20px;
+
+    .version {
+      white-space: nowrap;
+    }
+
+    strong {
+      font-weight: 500;
+    }
+
+    a {
+      color: var(--color-text-secondary);
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.about {
+  padding: 20px;
+  border-top: 1px solid var(--color-border-primary);
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__footer {
+    color: var(--color-text-tertiary);
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+    margin-top: 20px;
+  }
+
+  &__header {
+    margin-bottom: 30px;
+
+    &__hero {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1.9;
+      background: var(--color-bg-tertiary);
+      border-radius: 8px;
+      margin-bottom: 30px;
+    }
+
+    h1,
+    p {
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      line-height: 1.5;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  &__meta {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    display: flex;
+    margin-bottom: 30px;
+    font-size: 15px;
+
+    &__column {
+      box-sizing: border-box;
+      width: 50%;
+      padding: 20px;
+    }
+
+    &__divider {
+      width: 0;
+      border: 0;
+      border-style: solid;
+      border-color: var(--color-border-primary);
+      border-left-width: 1px;
+      min-height: calc(100% - 60px);
+      flex: 0 0 auto;
+    }
+
+    h4 {
+      font-size: 15px;
+      text-transform: uppercase;
+      color: var(--color-text-secondary);
+      font-weight: 500;
+      margin-bottom: 20px;
+    }
+
+    @media screen and (width <= 600px) {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+
+    .layout-multiple-columns & {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+  }
+
+  &__mail {
+    color: var(--color-text-primary);
+    text-decoration: none;
+    font-weight: 500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .link-footer {
+    padding: 0;
+    margin-top: 60px;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+
+    @media screen and (min-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-inline-start: 0;
+  }
+
+  .account__relationship {
+    display: none;
+  }
+
+  &__section {
+    margin-bottom: 10px;
+
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 17px;
+      font-weight: 600;
+      line-height: 22px;
+      padding: 20px;
+      border-radius: 4px;
+      border: 1px solid var(--color-border-primary);
+      color: var(--color-text-brand);
+      cursor: pointer;
+      width: 100%;
+      background: none;
+    }
+
+    &.active &__title {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__body {
+      border: 1px solid var(--color-border-primary);
+      border-top: 0;
+      padding: 20px;
+      font-size: 15px;
+      line-height: 22px;
+    }
+  }
+
+  &__domain-blocks {
+    margin-top: 30px;
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+
+    &__domain {
+      border-bottom: 1px solid var(--color-border-primary);
+      padding: 10px;
+      font-size: 15px;
+      color: var(--color-text-secondary);
+
+      &:nth-child(2n) {
+        background: var(--color-bg-secondary);
+      }
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &__header {
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      h6 {
+        color: var(--color-text-primary);
+        font-size: inherit;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.notification-list {
+  position: fixed;
+  bottom: 2rem;
+  inset-inline-start: 1rem;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.notification-bar {
+  --alert-edge-spacing: 1rem;
+
+  display: flex;
+  gap: 10px;
+  flex: 0 0 auto;
+  width: auto;
+  padding: 15px;
+  margin: 0;
+  color: var(--color-text-on-inverted);
+  background: var(--color-bg-inverted);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--color-border-on-bg-inverted);
+  border-radius: 8px;
+  box-shadow:
+    0 10px 15px -3px var(--color-shadow-primary),
+    0 4px 6px -4px var(--color-shadow-primary);
+  cursor: default;
+  font-size: 15px;
+  line-height: 21px;
+
+  &.from-side {
+    translate: calc(
+      -1 * (100% + var(--alert-edge-spacing)) * var(--text-x-direction)
+    );
+  }
+
+  &.from-below {
+    translate: 0 calc(100% + var(--alert-edge-spacing));
+  }
+
+  &.notification-bar--active {
+    translate: none;
+  }
+
+  .no-reduce-motion & {
+    transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1);
+    will-change: translate;
+  }
+}
+
+.notification-bar__content {
+  margin-inline-end: auto;
+}
+
+.notification-bar__title {
+  margin-inline-end: 5px;
+  font-weight: 700;
+}
+
+.notification-bar__action {
+  display: inline-block;
+  border: 0;
+  background: transparent;
+  text-transform: uppercase;
+  cursor: pointer;
+  color: var(--color-text-brand);
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 0 4px;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: var(--color-bg-brand-softer);
+  }
+}
+
+.notification-bar__dismiss-button {
+  margin-top: -2px;
+  color: rgb(from currentColor r g b / 85%);
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: currentColor;
+  }
+}
+
+.notification-bar__loading-indicator {
+  --spinner-size: 22px;
+
+  position: relative;
+  height: var(--spinner-size);
+  width: var(--spinner-size);
+  margin-inline-start: 2px;
+
+  svg {
+    color: var(--color-text-on-media);
+    height: var(--spinner-size);
+    width: var(--spinner-size);
+  }
+}
+
+.hashtag-header {
+  border-bottom: 1px solid var(--color-border-primary);
+  padding: 15px;
+  font-size: 17px;
+  line-height: 22px;
+  color: var(--color-text-secondary);
+
+  strong {
+    font-weight: 700;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    gap: 15px;
+
+    h1 {
+      color: var(--color-text-primary);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 22px;
+      line-height: 33px;
+      font-weight: 700;
+    }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .button {
+        flex-shrink: 1;
+        white-space: nowrap;
+        min-width: 80px;
+      }
+
+      .icon-button {
+        border: 1px solid var(--color-border-primary);
+        border-radius: 4px;
+        box-sizing: content-box;
+        padding: 5px;
+
+        .icon {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+}
+
+.hashtag-bar {
+  margin-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  line-height: 16px;
+  gap: 6px;
+  color: color-mix(
+    in oklab,
+    var(--color-text-primary),
+    var(--color-text-secondary)
+  );
+
+  a {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
+    padding: 4px 12px;
+    background: var(--color-bg-brand-softer);
+    border-radius: 4px;
+    font-weight: 500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: var(--color-bg-brand-soft);
+    }
+  }
+
+  .link-button {
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    padding: 0;
+  }
+}
+
+.inline-follow-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 0;
+  padding-bottom: 0;
+  border-bottom: 1px solid var(--color-border-primary);
+  background: var(--color-bg-brand-softer);
+
+  &.focusable:focus-visible {
+    background: var(--color-bg-brand-softer);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+
+    h3 {
+      font-size: 15px;
+      line-height: 22px;
+      font-weight: 500;
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+
+    .link-button {
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+
+  &__body {
+    position: relative;
+
+    &__scroll-button {
+      position: absolute;
+      height: 100%;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      top: 0;
+      color: var(--color-text-primary);
+      opacity: 0.5;
+
+      &.left {
+        left: 0;
+      }
+
+      &.right {
+        right: 0;
+      }
+
+      &__icon {
+        border-radius: 50%;
+        color: var(--color-text-on-brand-base);
+        background: var(--color-bg-brand-base);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        aspect-ratio: 1;
+        padding: 8px;
+
+        .icon {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        opacity: 1;
+      }
+    }
+
+    &__scrollable {
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: nowrap;
+      min-height: 228px;
+      gap: 16px;
+      padding: 16px;
+      scroll-snap-type: x mandatory;
+      scroll-padding: 16px;
+      scroll-behavior: smooth;
+      overflow-x: scroll;
+      scrollbar-width: none;
+
+      &__card {
+        background: var(--color-bg-primary);
+        border: 1px solid var(--color-border-primary);
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        align-items: center;
+        padding: 12px;
+        scroll-snap-align: start;
+        flex: 0 0 auto;
+        width: 200px;
+        box-sizing: border-box;
+        position: relative;
+
+        a {
+          text-decoration: none;
+        }
+
+        & > .icon-button {
+          position: absolute;
+          inset-inline-end: 8px;
+          top: 8px;
+          opacity: 0.75;
+        }
+
+        &__avatar {
+          height: 48px;
+          display: flex;
+
+          a {
+            display: flex;
+            text-decoration: none;
+          }
+        }
+
+        .account__avatar {
+          flex-shrink: 0;
+          align-self: flex-end;
+          border: 1px solid var(--color-border-primary);
+          background-color: var(--color-bg-tertiary);
+        }
+
+        &__text-stack {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          align-items: center;
+          max-width: 100%;
+
+          a {
+            max-width: 100%;
+          }
+
+          &__source {
+            display: inline-flex;
+            align-items: center;
+            color: var(--color-text-tertiary);
+            gap: 4px;
+            overflow: hidden;
+            white-space: nowrap;
+            cursor: help;
+
+            > span {
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+
+            .icon {
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+
+        .display-name {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          align-items: center;
+
+          & > * {
+            max-width: 100%;
+          }
+
+          &__html {
+            font-size: 15px;
+            font-weight: 500;
+            color: var(--color-text-primary);
+          }
+
+          &__account {
+            font-size: 14px;
+            color: var(--color-text-secondary);
+          }
+        }
+
+        .verified-badge {
+          font-size: 14px;
+          max-width: 100%;
+        }
+
+        .button {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.filtered-notifications-banner {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-primary);
+  padding: 16px 24px;
+  gap: 8px;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: var(--color-text-primary);
+  }
+
+  .notification-group__icon {
+    color: inherit;
+  }
+
+  &__text {
+    flex: 1 1 auto;
+    font-size: 14px;
+    line-height: 20px;
+
+    strong {
+      font-size: 16px;
+      line-height: 24px;
+      display: block;
+    }
+  }
+
+  &__badge {
+    color: var(--color-text-on-brand-base);
+    background: var(--color-bg-brand-base);
+    border-radius: 100px;
+    padding: 2px 8px;
+  }
+}
+
+.notification-request {
+  $padding: 15px;
+
+  display: flex;
+  padding: $padding;
+  gap: 8px;
+  position: relative;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &__checkbox {
+    position: absolute;
+    inset-inline-start: $padding;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    overflow: hidden;
+    opacity: 0;
+
+    .check-box {
+      display: flex;
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1 1 auto;
+    text-decoration: none;
+    color: inherit;
+    overflow: hidden;
+
+    .account__avatar {
+      flex-shrink: 0;
+    }
+  }
+
+  &__name {
+    flex: 1 1 auto;
+    color: var(--color-text-secondary);
+    font-size: 14px;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &__display-name {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 16px;
+      letter-spacing: 0.5px;
+      line-height: 24px;
+      color: var(--color-text-primary);
+
+      bdi {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .filtered-notifications-banner__badge {
+      color: var(--color-text-on-brand-base);
+      background: var(--color-bg-brand-base);
+      border-radius: 4px;
+      padding: 1px 6px;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .icon-button {
+      border-radius: 4px;
+      border: 1px solid var(--color-border-primary);
+      padding: 5px;
+    }
+  }
+
+  .notification-request__link {
+    transition: padding-inline-start 0.1s ease-in-out;
+  }
+
+  &--forced-checkbox {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    .notification-request__checkbox {
+      opacity: 1;
+      width: 30px;
+    }
+
+    .notification-request__link {
+      padding-inline-start: 30px;
+    }
+
+    .notification-request__actions {
+      display: none;
+    }
+  }
+}
+
+.more-from-author {
+  box-sizing: border-box;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+  border-radius: 0 0 8px 8px;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+
+  .logo {
+    width: 16px;
+    height: 16px;
+    color: var(--color-text-secondary);
+  }
+
+  & > span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    text-decoration: none;
+    min-width: 0;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-text-brand);
+    }
+  }
+}
+
+.notification-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &__icon {
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    color: var(--color-text-tertiary);
+
+    .icon {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  &--follow &__icon,
+  &--follow-request &__icon {
+    color: var(--color-text-brand);
+  }
+
+  &--favourite &__icon {
+    color: var(--color-text-favourite-highlight);
+  }
+
+  &--reblog &__icon {
+    color: var(--color-text-success);
+  }
+
+  &--relationships-severance-event &__icon,
+  &--admin-report &__icon,
+  &--admin-sign-up &__icon {
+    color: var(--color-text-tertiary);
+  }
+
+  &--moderation-warning &__icon {
+    color: var(--color-text-bookmark-highlight);
+  }
+
+  &--follow-request &__actions {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+
+    .icon-button {
+      border: 1px solid var(--color-border-primary);
+      border-radius: 50%;
+      padding: 1px;
+    }
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1 1 auto;
+    overflow: hidden;
+    container-type: inline-size;
+
+    &__header {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      &__wrapper {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      &__label {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 8px;
+        font-size: 15px;
+        line-height: 22px;
+        color: var(--color-text-secondary);
+
+        a {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        bdi {
+          font-weight: 700;
+          color: var(--color-text-primary);
+        }
+
+        time {
+          color: var(--color-text-tertiary);
+        }
+
+        @container (width < 350px) {
+          time,
+          &-separator {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &__status {
+      border: 1px solid var(--color-border-primary);
+      border-radius: 8px;
+      padding: 8px;
+    }
+
+    &__additional-content {
+      color: var(--color-text-tertiary);
+      margin-top: -8px; // to offset the parent's `gap` property
+      font-size: 15px;
+      line-height: 22px;
+    }
+  }
+
+  .status {
+    padding: 0;
+    border: 0;
+  }
+
+  &__embedded-status {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    cursor: pointer;
+
+    &__account {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--color-text-tertiary);
+      font-size: 15px;
+      line-height: 22px;
+
+      bdi {
+        color: var(--color-text-secondary);
+      }
+
+      .account__avatar {
+        flex: 0 0 auto;
+      }
+    }
+
+    &__content {
+      display: -webkit-box;
+      font-size: 15px;
+      line-height: 22px;
+      color: var(--color-text-secondary);
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      -webkit-box-orient: vertical;
+      max-height: none;
+      overflow: hidden;
+
+      p,
+      a {
+        color: inherit;
+      }
+
+      p {
+        margin-bottom: 8px;
+      }
+    }
+
+    .reply-indicator__attachments {
+      margin-top: 0;
+      font-size: 15px;
+      line-height: 22px;
+      color: var(--color-text-tertiary);
+    }
+  }
+}
+
+.notification-group__actions,
+.compose-form__actions {
+  .button {
+    display: block; // Otherwise text-ellipsis doesn't work
+    flex: 1 1 auto;
+  }
+}
+
+.notification-ungrouped {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--color-text-tertiary);
+    font-size: 15px;
+    line-height: 22px;
+    font-weight: 500;
+    padding-inline-start: 24px;
+    margin-bottom: 16px;
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+
+      .icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  .status:not(.status--is-quote) {
+    border: 0;
+    padding: 0;
+  }
+
+  .status__wrapper-direct {
+    background: transparent;
+  }
+
+  .status {
+    // 40px avatar + 8px gap
+    --status-gutter-width: 48px;
+  }
+
+  .status--is-quote {
+    --status-gutter-width: 0;
+  }
+
+  .status__content,
+  .status__action-bar,
+  .media-gallery,
+  .video-player,
+  .audio-player,
+  .attachment-list,
+  .picture-in-picture-placeholder,
+  .more-from-author,
+  .status-card,
+  .hashtag-bar,
+  .content-warning,
+  .filter-warning {
+    margin-inline-start: var(--status-gutter-width);
+    width: calc(100% - var(--status-gutter-width));
+  }
+
+  .more-from-author {
+    width: calc(100% - var(--status-gutter-width) + 2px);
+  }
+
+  .status__content__read-more-button {
+    margin-inline-start: var(--status-gutter-width);
+  }
+
+  .notification__report {
+    border: 0;
+    padding: 0;
+  }
+}
+
+.notification-group--unread,
+.notification-ungrouped--unread {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    border-inline-start: 4px solid var(--color-text-brand);
+    pointer-events: none;
+  }
+}
+
+.hover-card-controller[data-popper-reference-hidden='true'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hover-card {
+  box-shadow: var(--dropdown-shadow);
+  background: var(--color-bg-primary);
+  backdrop-filter: $backdrop-blur-filter;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  padding: 16px;
+  width: 270px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &--loading {
+    position: relative;
+    min-height: 100px;
+  }
+
+  &__name {
+    display: flex;
+    gap: 12px;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &__numbers,
+  &__familiar-followers {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px 10px;
+  }
+
+  &__numbers {
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--color-text-primary);
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__text-row {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__bio {
+    color: var(--color-text-primary);
+    font-size: 14px;
+    line-height: 20px;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    max-height: 2 * 20px;
+    overflow: hidden;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &__note {
+    &-label {
+      color: var(--color-text-tertiary);
+      font-size: 12px;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    dd {
+      white-space: pre-line;
+      color: var(--color-text-primary);
+      overflow: hidden;
+      line-clamp: 3; // Not yet supported in browers
+      display: -webkit-box; // The next 3 properties are needed
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__limited-account-note {
+    text-align: center;
+    font-weight: 500;
+  }
+
+  .display-name {
+    font-size: 15px;
+    line-height: 22px;
+
+    bdi {
+      font-weight: 500;
+      color: var(--color-text-primary);
+    }
+
+    &__account {
+      display: block;
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  .account-fields {
+    color: var(--color-text-primary);
+    font-size: 14px;
+    line-height: 20px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:focus,
+      &:hover,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+
+    dl {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      dt {
+        flex: 0 1 auto;
+        color: var(--color-text-tertiary);
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      dd {
+        flex: 1 1 auto;
+        font-weight: 500;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-align: end;
+      }
+
+      &.verified {
+        dd {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 4px;
+          overflow: hidden;
+          white-space: nowrap;
+          color: var(--color-text-success);
+
+          & > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          a {
+            font-weight: 500;
+          }
+
+          .icon {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.content-warning {
+  display: block;
+  box-sizing: border-box;
+  color: var(--color-text-primary);
+  background: var(--color-bg-brand-softer);
+  border: 1px solid var(--color-border-on-bg-brand-softer);
+  border-radius: 8px;
+  padding: 8px (5px + 8px);
+  position: relative;
+  font-size: 15px;
+  line-height: 22px;
+  cursor: pointer;
+
+  p {
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+
+  .link-button {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: 500;
+  }
+
+  &--filter {
+    color: var(--color-text-secondary);
+
+    p {
+      font-weight: normal;
+    }
+
+    .filter-name {
+      font-weight: 500;
+      color: var(--color-text-primary);
+    }
+  }
+}
+
+.lists__item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-inline-end: 13px;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 16px 13px;
+    flex: 1 1 auto;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--color-text-secondary);
+    text-decoration: none;
+
+    &:is(a):hover,
+    &:is(a):focus,
+    &:is(a):active {
+      color: var(--color-text-primary);
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      background: transparent;
+      border: 0;
+      padding: 0;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+
+      &::placeholder {
+        color: var(--color-text-secondary);
+        opacity: 1;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+    }
+  }
+}
+
+.column-search-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  border: 1px solid var(--color-border-primary);
+  border-top: 0;
+  border-bottom: 0;
+  padding: 16px;
+  padding-bottom: 8px;
+
+  input {
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border-primary);
+    color: var(--color-text-primary);
+    padding: 12px;
+    font-size: 16px;
+    line-height: normal;
+    border-radius: 4px;
+    display: block;
+    flex: 1 1 auto;
+
+    &::placeholder {
+      color: var(--color-text-secondary);
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+}
+
+.column-footer {
+  padding: 16px;
+}
+
+.lists-scrollable {
+  min-height: 50vh;
+}
+
+.featured-carousel {
+  overflow: hidden;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-border-primary);
+  touch-action: pan-y;
+
+  &__slides {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: start;
+  }
+
+  &__slide {
+    flex: 0 0 auto;
+    flex-basis: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .status {
+    border-bottom: 0;
+  }
+
+  &__header {
+    padding: 8px 16px;
+    color: var(--color-text-secondary);
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__title {
+    flex-grow: 1;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__pagination {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/containers.scss b/app/javascript/styles_new/mastodon/containers.scss
new file mode 100644
index 00000000000..57c62a29e35
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/containers.scss
@@ -0,0 +1,166 @@
+@use 'variables' as *;
+
+.container-alt {
+  width: 700px;
+  margin: 0 auto;
+
+  @media screen and (width <= 740px) {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+.logo-container {
+  margin: 50px auto;
+
+  h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .logo {
+      height: 42px;
+      margin-inline-end: 10px;
+    }
+
+    a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--color-text-primary);
+      text-decoration: none;
+      outline: 0;
+      padding: 12px 16px;
+      line-height: 32px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+}
+
+.compose-standalone {
+  .compose-form {
+    width: 400px;
+    margin: 0 auto;
+    padding: 10px 0;
+    padding-bottom: 20px;
+    box-sizing: border-box;
+
+    @media screen and (width <= 400px) {
+      width: 100%;
+      padding: 20px;
+    }
+  }
+}
+
+.account-header {
+  width: 400px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  box-sizing: border-box;
+  padding: 20px 0;
+  margin-top: 40px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--color-border-primary);
+
+  @media screen and (width <= 440px) {
+    width: 100%;
+    margin: 0;
+    padding: 20px;
+  }
+
+  .avatar {
+    width: 48px;
+    height: 48px;
+    flex: 0 0 auto;
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      margin: 0;
+      border-radius: var(--avatar-border-radius);
+    }
+  }
+
+  .name {
+    flex: 1 1 auto;
+    color: var(--color-text-primary);
+
+    .username {
+      display: block;
+      font-size: 16px;
+      line-height: 24px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: var(--color-text-primary);
+    }
+  }
+
+  .logout-link {
+    display: block;
+    font-size: 32px;
+    line-height: 40px;
+    flex: 0 0 auto;
+  }
+}
+
+.redirect {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-size: 14px;
+  line-height: 18px;
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+
+    img {
+      height: 48px;
+    }
+  }
+
+  &__message {
+    text-align: center;
+
+    h1 {
+      font-size: 17px;
+      line-height: 22px;
+      font-weight: 700;
+      margin-bottom: 30px;
+    }
+
+    p {
+      margin-bottom: 30px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: var(--color-text-brand);
+      font-weight: 500;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__link {
+    margin-top: 15px;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/css_variables.scss b/app/javascript/styles_new/mastodon/css_variables.scss
new file mode 100644
index 00000000000..ba3319a6b48
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/css_variables.scss
@@ -0,0 +1,228 @@
+@use 'theme_utils' as utils;
+
+:root {
+  --color-black: #000;
+  --color-grey-950: #181821;
+  --color-grey-800: #292938;
+  --color-grey-700: #444664;
+  --color-grey-600: #545778;
+  --color-grey-500: #696d91;
+  --color-grey-400: #8b8dac;
+  --color-grey-300: #b4b6cb;
+  --color-grey-200: #d8d9e3;
+  --color-grey-100: #f0f0f5;
+  --color-grey-50: #f0f1ff;
+  --color-white: #fff;
+  --color-indigo-600: #6147e6;
+  --color-indigo-400: #8886ff;
+  --color-indigo-300: #a5abfd;
+  --color-indigo-200: #c8cdfe;
+  --color-indigo-100: #e0e3ff;
+  --color-indigo-50: #f0f1ff;
+  --color-red-500: #ff637e;
+  --color-red-600: #ec003f;
+  --color-yellow-400: #ffb900;
+  --color-yellow-600: #e17100;
+  --color-green-400: #05df72;
+  --color-green-600: #00a63e;
+
+  /* TEXT TOKENS */
+
+  --color-text-primary: var(--color-grey-50);
+  --color-text-secondary: var(--color-grey-400);
+  --color-text-tertiary: var(--color-grey-500);
+  --color-text-on-inverted: var(--color-grey-950);
+  --color-text-brand: var(--color-indigo-400);
+  --color-text-brand-soft: color-mix(
+    in oklab,
+    var(--color-text-primary),
+    var(--color-text-brand)
+  );
+  --color-text-on-brand-base: var(--color-white);
+  --color-text-error: var(--color-red-500);
+  --color-text-on-error-base: var(--color-white);
+  --color-text-warning: var(--color-yellow-400);
+  --color-text-on-warning-base: var(--color-white);
+  --color-text-success: var(--color-green-400);
+  --color-text-on-success-base: var(--color-white);
+  --color-text-disabled: var(--color-grey-600);
+  --color-text-on-disabled: var(--color-grey-400);
+  --color-text-bookmark-highlight: var(--color-text-error);
+  --color-text-favourite-highlight: var(--color-text-warning);
+  --color-text-on-media: var(--color-white);
+  --color-text-status-links: color-mix(
+    in oklab,
+    var(--color-text-primary),
+    var(--color-text-secondary)
+  );
+
+  /* BACKGROUND TOKENS */
+
+  // Neutrals
+  --color-bg-primary: var(--color-grey-950);
+  --overlay-strength-secondary: 10%;
+  --color-bg-secondary-base: var(--color-indigo-200);
+  --color-bg-secondary: #{utils.css-alpha(
+      var(--color-bg-secondary-base),
+      var(--overlay-strength-secondary)
+    )};
+  --color-bg-secondary-solid: color-mix(
+    in srgb,
+    var(--color-bg-primary),
+    var(--color-bg-secondary-base) var(--overlay-strength-secondary)
+  );
+  --color-bg-tertiary: color-mix(
+    in oklab,
+    var(--color-bg-primary),
+    var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
+  );
+
+  // Utility
+  --color-bg-ambient: var(--color-bg-primary);
+  --color-bg-elevated: var(--color-grey-800);
+  --color-bg-inverted: var(--color-grey-50);
+  --color-bg-media-base: var(--color-black);
+  --color-bg-media-strength: 65%;
+  --color-bg-media: #{utils.css-alpha(
+      var(--color-bg-media-base),
+      var(--color-bg-media-strength)
+    )};
+  --color-bg-overlay: var(--color-bg-primary);
+  --color-bg-disabled: var(--color-grey-700);
+
+  // Brand
+  --overlay-strength-brand: 10%;
+  --color-bg-brand-base: var(--color-indigo-600);
+  --color-bg-brand-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-brand-base),
+    black var(--overlay-strength-brand)
+  );
+  --color-bg-brand-soft: #{utils.css-alpha(
+      var(--color-bg-brand-base),
+      calc(var(--overlay-strength-brand) * 1.5)
+    )};
+  --color-bg-brand-softer: #{utils.css-alpha(
+      var(--color-bg-brand-base),
+      var(--overlay-strength-brand)
+    )};
+
+  // Error
+  --overlay-strength-error: 12%;
+  --color-bg-error-base: var(--color-red-600);
+  --color-bg-error-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-error-base),
+    black var(--overlay-strength-error)
+  );
+  --color-bg-error-soft: #{utils.css-alpha(
+      var(--color-bg-error-base),
+      calc(var(--overlay-strength-error) * 1.5)
+    )};
+  --color-bg-error-softer: #{utils.css-alpha(
+      var(--color-bg-error-base),
+      var(--overlay-strength-error)
+    )};
+
+  // Warning
+  --overlay-strength-warning: 10%;
+  --color-bg-warning-base: var(--color-yellow-600);
+  --color-bg-warning-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-warning-base),
+    black var(--overlay-strength-warning)
+  );
+  --color-bg-warning-soft: #{utils.css-alpha(
+      var(--color-bg-warning-base),
+      calc(var(--overlay-strength-warning) * 1.5)
+    )};
+  --color-bg-warning-softer: #{utils.css-alpha(
+      var(--color-bg-warning-base),
+      var(--overlay-strength-warning)
+    )};
+
+  // Success
+  --overlay-strength-success: 15%;
+  --color-bg-success-base: var(--color-green-600);
+  --color-bg-success-base-hover: color-mix(
+    in oklab,
+    var(--color-bg-success-base),
+    black var(--overlay-strength-success)
+  );
+  --color-bg-success-soft: #{utils.css-alpha(
+      var(--color-bg-success-base),
+      calc(var(--overlay-strength-success) * 1.5)
+    )};
+  --color-bg-success-softer: #{utils.css-alpha(
+      var(--color-bg-success-base),
+      var(--overlay-strength-success)
+    )};
+
+  /* BORDER TOKENS */
+
+  --border-strength-primary: 18%;
+  --color-border-primary: #{utils.css-alpha(
+      var(--color-indigo-200),
+      var(--border-strength-primary)
+    )};
+  --color-border-media: rgb(252 248 255 / 15%);
+  --color-border-on-bg-secondary: #{utils.css-alpha(
+      var(--color-indigo-200),
+      calc(var(--border-strength-primary) / 1.5)
+    )};
+  --color-border-on-bg-brand-softer: var(--color-border-primary);
+  --color-border-on-bg-error-softer: #{utils.css-alpha(
+      var(--color-text-error),
+      50%
+    )};
+  --color-border-on-bg-warning-softer: #{utils.css-alpha(
+      var(--color-text-warning),
+      50%
+    )};
+  --color-border-on-bg-success-softer: #{utils.css-alpha(
+      var(--color-text-success),
+      50%
+    )};
+  --color-border-on-bg-inverted: var(--color-border-primary);
+
+  /* SHADOW TOKENS */
+
+  --shadow-strength-primary: 80%;
+  --color-shadow-primary: #{utils.css-alpha(
+      var(--color-black),
+      var(--shadow-strength-primary)
+    )};
+  --dropdown-shadow:
+    0 20px 25px -5px var(--color-shadow-primary),
+    0 8px 10px -6px var(--color-shadow-primary);
+  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
+
+  /* GRAPHS/CHARTS TOKENS */
+
+  --color-graph-primary-stroke: var(--color-text-brand);
+  --color-graph-primary-fill: var(--color-bg-brand-softer);
+  --color-graph-warning-stroke: var(--color-text-warning);
+  --color-graph-warning-fill: var(--color-bg-warning-softer);
+  --color-graph-disabled-stroke: var(--color-text-disabled);
+  --color-graph-disabled-fill: var(--color-bg-disabled);
+
+  /* LEGACY TOKENS */
+
+  --rich-text-container-color: rgb(87 24 60 / 100%);
+  --rich-text-text-color: rgb(255 175 212 / 100%);
+  --rich-text-decorations-color: rgb(128 58 95 / 100%);
+
+  /* MISCELLANEOUS */
+
+  --outline-focus-default: 2px solid var(--color-text-brand);
+  --avatar-border-radius: 8px;
+}
+
+body {
+  // Variable for easily inverting directional UI elements,
+  --text-x-direction: 1;
+
+  &.rtl {
+    --text-x-direction: -1;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/dashboard.scss b/app/javascript/styles_new/mastodon/dashboard.scss
new file mode 100644
index 00000000000..db3f0e8a842
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/dashboard.scss
@@ -0,0 +1,120 @@
+@use 'variables' as *;
+
+.dashboard__counters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -5px;
+  margin-bottom: 20px;
+
+  & > div {
+    box-sizing: border-box;
+    flex: 0 0 33.333%;
+    padding: 0 5px;
+    margin-bottom: 10px;
+
+    & > div,
+    & > a {
+      padding: 20px;
+      background: var(--color-bg-primary);
+      border-radius: 4px;
+      border: 1px solid var(--color-border-primary);
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    & > a {
+      text-decoration: none;
+      color: inherit;
+      display: block;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: var(--color-bg-brand-softer);
+      }
+    }
+  }
+
+  &__num,
+  &__text {
+    text-align: center;
+    font-weight: 500;
+    font-size: 24px;
+    color: var(--color-text-primary);
+    margin-bottom: 20px;
+    line-height: 30px;
+  }
+
+  &__text {
+    font-size: 18px;
+  }
+
+  &__label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    text-align: center;
+    font-weight: 500;
+  }
+}
+
+.dashboard {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+
+  @media screen and (width <= 1350px) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  &__item {
+    &--span-double-column {
+      grid-column: span 2;
+    }
+
+    &--span-double-row {
+      grid-row: span 2;
+    }
+
+    h4 {
+      padding-top: 20px;
+    }
+  }
+
+  &__quick-access {
+    display: flex;
+    align-items: baseline;
+    border-radius: 4px;
+    background: var(--color-bg-brand-base);
+    color: var(--color-text-on-brand-base);
+    transition: all 100ms ease-in;
+    font-size: 14px;
+    padding: 8px 16px;
+    text-decoration: none;
+    margin-bottom: 4px;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: var(--color-bg-brand-base-hover);
+      transition: all 200ms ease-out;
+    }
+
+    &.positive {
+      background: var(--color-bg-success-softer);
+      color: var(--color-text-success);
+    }
+
+    &.negative {
+      background: var(--color-bg-error-softer);
+      color: var(--color-text-error);
+    }
+
+    span {
+      flex: 1 1 auto;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/emoji_picker.scss b/app/javascript/styles_new/mastodon/emoji_picker.scss
new file mode 100644
index 00000000000..ad2f2f630db
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/emoji_picker.scss
@@ -0,0 +1,248 @@
+@use 'variables' as *;
+
+.emoji-mart {
+  font-size: 13px;
+  display: inline-block;
+
+  &,
+  * {
+    box-sizing: border-box;
+    line-height: 1.15;
+  }
+
+  .emoji-mart-emoji {
+    padding: 6px;
+  }
+}
+
+.emoji-mart-bar {
+  &:first-child {
+    background: var(--color-bg-tertiary);
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+}
+
+.emoji-mart-anchors {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 6px;
+  line-height: 0;
+}
+
+.emoji-mart-anchor {
+  position: relative;
+  flex: 1;
+  text-align: center;
+  padding: 12px 4px;
+  overflow: hidden;
+  transition: color 0.1s ease-out;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  color: var(--color-text-secondary);
+
+  &:hover {
+    color: color-mix(
+      in oklab,
+      var(--color-text-primary),
+      var(--color-text-secondary)
+    );
+  }
+}
+
+.emoji-mart-anchor-selected {
+  color: var(--color-text-brand);
+
+  &:hover {
+    color: var(--color-text-brand-soft);
+  }
+
+  .emoji-mart-anchor-bar {
+    bottom: -1px;
+  }
+}
+
+.emoji-mart-anchor-bar {
+  position: absolute;
+  bottom: -5px;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 4px;
+  background-color: var(--color-text-brand);
+}
+
+.emoji-mart-anchors {
+  i {
+    display: inline-block;
+    width: 100%;
+    max-width: 22px;
+  }
+
+  svg {
+    fill: currentColor;
+    max-height: 18px;
+  }
+}
+
+.emoji-mart-scroll {
+  overflow-y: scroll;
+  height: 270px;
+  max-height: 35vh;
+  padding: 0 6px 6px;
+  will-change: transform;
+}
+
+.emoji-mart-search {
+  padding: 10px;
+  padding-inline-end: 45px;
+  position: relative;
+
+  input {
+    font-size: 16px;
+    font-weight: 400;
+    padding: 7px 9px;
+    padding-inline-end: 25px;
+    font-family: inherit;
+    display: block;
+    width: 100%;
+    background: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &:active,
+    &:focus {
+      outline: none !important;
+      border-width: 1px !important;
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+}
+
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 18px;
+  inset-inline-end: 45px + 5px;
+  z-index: 2;
+  padding: 2px 5px 1px;
+  border: 0;
+  background: none;
+  transition: all 100ms linear;
+  transition-property: opacity;
+  pointer-events: auto;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+}
+
+.emoji-mart-category .emoji-mart-emoji {
+  cursor: pointer;
+
+  span {
+    z-index: 1;
+    position: relative;
+    text-align: center;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover::before {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-bg-brand-softer);
+    border-radius: 100%;
+  }
+}
+
+.emoji-mart-category-label {
+  z-index: 2;
+  position: relative;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+
+  span {
+    display: block;
+    width: 100%;
+    font-weight: 500;
+    padding: 5px 6px;
+  }
+}
+
+/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+.emoji-mart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+.emoji-mart-category-list {
+  margin: 0;
+  padding: 0;
+}
+
+.emoji-mart-category-list li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+
+.emoji-mart-emoji {
+  position: relative;
+  display: inline-block;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: 0;
+
+  span {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+.emoji-mart-no-results {
+  font-size: 14px;
+  color: var(--color-text-tertiary);
+  text-align: center;
+  padding: 5px 6px;
+  padding-top: 70px;
+
+  .emoji-mart-no-results-label {
+    margin-top: 0.2em;
+  }
+
+  .emoji-mart-emoji:hover::before {
+    cursor: default;
+    content: none;
+  }
+}
+
+.emoji-mart-preview {
+  display: none;
+}
diff --git a/app/javascript/styles_new/mastodon/forms.scss b/app/javascript/styles_new/mastodon/forms.scss
new file mode 100644
index 00000000000..9f716c2126d
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/forms.scss
@@ -0,0 +1,1449 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+code {
+  font-family: $font-monospace, monospace;
+  font-weight: 400;
+}
+
+.form-container {
+  max-width: 450px;
+  padding: 20px;
+  padding-bottom: 50px;
+  margin: 50px auto;
+}
+
+.form-section {
+  border-radius: 8px;
+  background: var(--color-bg-secondary);
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.fade-out-top {
+  position: relative;
+  overflow: hidden;
+  height: 160px;
+  max-width: 566px;
+  margin-inline: auto;
+
+  &::after {
+    content: '';
+    display: block;
+    background: linear-gradient(
+      to bottom,
+      var(--color-bg-secondary-solid),
+      transparent
+    );
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100px;
+    pointer-events: none;
+  }
+
+  & > div {
+    position: absolute;
+    inset-inline-start: 0;
+    bottom: 0;
+  }
+}
+
+.indicator-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: var(--color-text-primary);
+
+  &.success {
+    color: var(--color-text-on-success-base);
+    background: var(--color-bg-success-base);
+  }
+
+  &.failure {
+    color: var(--color-text-on-error-base);
+    background: var(--color-bg-error-base);
+  }
+}
+
+.simple_form {
+  &.hidden {
+    display: none;
+  }
+
+  .input {
+    margin-bottom: 16px;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &__toolbar {
+      margin-top: 16px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .character-counter {
+        flex: 0 0 auto;
+      }
+    }
+
+    &.hidden {
+      margin: 0;
+    }
+
+    &.radio_buttons {
+      .radio {
+        margin-bottom: 15px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .radio > label {
+        position: relative;
+        padding-inline-start: 28px;
+
+        input {
+          position: absolute;
+          top: -2px;
+          inset-inline-start: 0;
+        }
+      }
+    }
+
+    &.boolean {
+      position: relative;
+      margin-bottom: 0;
+
+      .label_input > label {
+        font-family: inherit;
+        font-size: 14px;
+        padding-top: 5px;
+        color: var(--color-text-primary);
+        display: block;
+        width: auto;
+      }
+
+      .label_input,
+      .hint {
+        padding-inline-start: 28px;
+      }
+
+      .label_input__wrapper {
+        position: static;
+      }
+
+      label.checkbox {
+        position: absolute;
+        top: 2px;
+        inset-inline-start: 0;
+      }
+
+      label a {
+        color: var(--color-text-brand);
+        text-decoration: underline;
+
+        &:hover,
+        &:active,
+        &:focus {
+          text-decoration: none;
+        }
+      }
+
+      .overridden,
+      .recommended,
+      .not_recommended {
+        position: absolute;
+        margin: 0 4px;
+        margin-top: -2px;
+      }
+    }
+  }
+
+  .row {
+    display: flex;
+    margin: 0 -5px;
+
+    .input {
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      width: 50%;
+      padding: 0 5px;
+    }
+  }
+
+  .title {
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
+  }
+
+  .lead {
+    font-size: 17px;
+    line-height: 22px;
+    color: var(--color-text-primary);
+    margin-bottom: 30px;
+
+    &.invited-by {
+      margin-bottom: 15px;
+    }
+
+    a {
+      color: var(--color-text-brand);
+    }
+  }
+
+  .rules-list {
+    font-size: 17px;
+    line-height: 22px;
+    margin-bottom: 30px;
+  }
+
+  .hint {
+    color: var(--color-text-secondary);
+
+    a {
+      color: var(--color-text-brand);
+    }
+
+    code {
+      border-radius: 3px;
+      padding: 0.2em 0.4em;
+      background: var(--color-bg-secondary);
+    }
+
+    li {
+      list-style: disc;
+      margin-inline-start: 18px;
+    }
+
+    .icon {
+      vertical-align: -3px;
+    }
+  }
+
+  ul.hint {
+    margin-bottom: 15px;
+  }
+
+  span.hint {
+    display: block;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  p.hint {
+    margin-bottom: 15px;
+    color: var(--color-text-secondary);
+
+    &.subtle-hint {
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+      margin-top: 15px;
+      margin-bottom: 0;
+    }
+  }
+
+  .authentication-hint {
+    margin-bottom: 25px;
+  }
+
+  .card {
+    margin-bottom: 15px;
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  .input.with_floating_label {
+    .label_input {
+      display: flex;
+
+      & > label {
+        font-family: inherit;
+        font-size: 14px;
+        color: var(--color-text-primary);
+        font-weight: 500;
+        min-width: 150px;
+        flex: 0 0 auto;
+      }
+
+      input,
+      select {
+        flex: 1 1 auto;
+      }
+    }
+
+    &.select .hint {
+      margin-top: 6px;
+      margin-inline-start: 150px;
+    }
+  }
+
+  .input.with_label {
+    .label_input > label {
+      font-family: inherit;
+      font-size: 14px;
+      color: var(--color-text-primary);
+      display: block;
+      margin-bottom: 8px;
+      overflow-wrap: break-word;
+      font-weight: 500;
+    }
+
+    .hint {
+      margin-top: 6px;
+    }
+
+    ul {
+      flex: 390px;
+    }
+  }
+
+  .input.with_block_label {
+    max-width: none;
+
+    & > label {
+      font-family: inherit;
+      font-size: 14px;
+      color: var(--color-text-primary);
+      display: block;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .hint {
+      line-height: 16px;
+      margin-bottom: 12px;
+    }
+
+    ul {
+      columns: 2;
+
+      @media screen and (max-width: $mobile-breakpoint) {
+        columns: 1;
+      }
+    }
+  }
+
+  .input.with_block_label.user_role_permissions_as_keys ul {
+    columns: unset;
+  }
+
+  .input.datetime .label_input,
+  .input.date .label_input {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    select {
+      display: inline-block;
+      width: auto;
+      flex: 0;
+    }
+  }
+
+  .input.date_of_birth .label_input {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    input {
+      box-sizing: content-box;
+      width: 32px;
+      flex: 0;
+
+      &:last-child {
+        width: 64px;
+      }
+    }
+  }
+
+  .input.select.select--languages {
+    min-width: 32ch;
+  }
+
+  .required abbr {
+    text-decoration: none;
+    color: var(--color-text-error);
+  }
+
+  .fields-group {
+    margin-bottom: 25px;
+
+    .input:last-child {
+      margin-bottom: 0;
+    }
+
+    &__thumbnail {
+      display: block;
+      margin: 0;
+      margin-bottom: 10px;
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--avatar-border-radius);
+      background: url('@/images/void.png');
+
+      &[src$='missing.png'] {
+        visibility: hidden;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &#account_avatar-preview {
+        width: 90px;
+        height: 90px;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .fields-row {
+    display: flex;
+    margin: 0 -10px;
+    padding-top: 5px;
+    margin-bottom: 25px;
+
+    .input {
+      max-width: none;
+    }
+
+    &__column {
+      box-sizing: border-box;
+      padding: 0 10px;
+      flex: 1 1 auto;
+      min-height: 1px;
+
+      &-6 {
+        max-width: 50%;
+      }
+
+      .actions {
+        margin-top: 27px;
+      }
+    }
+
+    .fields-group:last-child,
+    .fields-row__column.fields-group {
+      margin-bottom: 0;
+    }
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      display: block;
+      margin-bottom: 0;
+
+      &__column {
+        max-width: none;
+      }
+
+      .fields-group:last-child,
+      .fields-row__column.fields-group,
+      .fields-row__column {
+        margin-bottom: 25px;
+      }
+    }
+
+    .fields-group.invited-by {
+      margin-bottom: 30px;
+
+      .hint {
+        text-align: center;
+      }
+    }
+  }
+
+  .input.radio_buttons .radio label {
+    margin-bottom: 5px;
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    display: block;
+    width: auto;
+  }
+
+  .check_boxes {
+    .checkbox {
+      label {
+        font-family: inherit;
+        font-size: 14px;
+        color: var(--color-text-primary);
+        display: inline-block;
+        width: auto;
+        position: relative;
+        padding-top: 5px;
+        padding-inline-start: 25px;
+        flex: 1 1 auto;
+      }
+
+      input[type='checkbox'] {
+        position: absolute;
+        inset-inline-start: 0;
+        top: 5px;
+        margin: 0;
+      }
+    }
+  }
+
+  .input.static .label_input__wrapper {
+    font-size: 14px;
+    padding: 10px;
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+  }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='datetime-local'],
+  textarea {
+    box-sizing: border-box;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--color-text-primary);
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: inherit;
+    resize: vertical;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    padding: 10px 16px;
+
+    &:invalid {
+      box-shadow: none;
+    }
+
+    &:required:valid {
+      border-color: var(--color-text-success);
+    }
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
+  }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='email'],
+  input[type='password'],
+  input[type='datetime-local'] {
+    &:focus:invalid:not(:placeholder-shown),
+    &:required:invalid:not(:placeholder-shown) {
+      border-color: var(--color-text-error);
+    }
+  }
+
+  .input.field_with_errors {
+    label {
+      color: var(--color-text-error);
+    }
+
+    input[type='text'],
+    input[type='number'],
+    input[type='email'],
+    input[type='password'],
+    input[type='datetime-local'],
+    textarea,
+    select {
+      border-color: var(--color-text-error);
+    }
+
+    .error {
+      display: block;
+      font-weight: 500;
+      color: var(--color-text-error);
+      margin-top: 4px;
+    }
+  }
+
+  .input.disabled {
+    opacity: 0.5;
+  }
+
+  .actions {
+    margin-top: 30px;
+    display: flex;
+    gap: 10px;
+
+    &.actions--top {
+      margin-top: 0;
+      margin-bottom: 30px;
+    }
+  }
+
+  .stacked-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 30px;
+    margin-bottom: 15px;
+  }
+
+  .btn {
+    display: block;
+    width: 100%;
+    border: 0;
+    border-radius: 4px;
+    background: var(--color-bg-brand-base);
+    color: var(--color-text-on-brand-base);
+    font-size: 15px;
+    line-height: 22px;
+    height: auto;
+    padding: 7px 18px;
+    text-decoration: none;
+    text-align: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-weight: 500;
+    outline: 0;
+
+    &:last-child {
+      margin-inline-end: 0;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: var(--color-bg-brand-base-hover);
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      color: var(--color-text-on-disabled);
+      background: var(--color-bg-disabled);
+    }
+
+    &.negative {
+      background: var(--color-bg-error-base);
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: var(--color-bg-error-base-hover);
+      }
+    }
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: inherit;
+    resize: vertical;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    padding-inline-start: 10px;
+    padding-inline-end: 30px;
+    height: 41px;
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
+  }
+
+  h4 {
+    margin-bottom: 15px !important;
+  }
+
+  .label_input {
+    position: relative;
+
+    &__loading-indicator {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      inset-inline-start: 0;
+      border: 1px solid transparent;
+      padding: 10px 16px;
+      width: 100%;
+    }
+
+    &__wrapper {
+      position: relative;
+    }
+
+    &__append {
+      position: absolute;
+      inset-inline-end: 3px;
+      top: 1px;
+      padding: 10px;
+      font-size: 14px;
+      color: var(--color-text-tertiary);
+      font-family: inherit;
+      pointer-events: none;
+      cursor: default;
+      max-width: 50%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+        bottom: 1px;
+        width: 5px;
+      }
+    }
+  }
+
+  .status-card {
+    contain: unset;
+  }
+}
+
+/* Double-chevron icon for custom select components */
+.select-wrapper,
+.select .label_input__wrapper {
+  width: 100%;
+
+  &::after {
+    --icon-size: 11px;
+
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 9px;
+    width: var(--icon-size);
+    background-color: var(--color-text-tertiary);
+    pointer-events: none;
+    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='black'/></svg>");
+    mask-position: right center;
+    mask-size: var(--icon-size);
+    mask-repeat: no-repeat;
+  }
+}
+
+.block-icon {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+.flash-message {
+  color: var(--color-text-brand);
+  background: transparent;
+  border: 1px solid var(--color-text-brand);
+  border-radius: 4px;
+  padding: 15px 10px;
+  margin-bottom: 30px;
+  text-align: center;
+
+  &.notice {
+    border: 1px solid var(--color-border-on-bg-success-softer);
+    background: var(--color-bg-success-softer);
+    color: var(--color-text-success);
+  }
+
+  &.warning {
+    border: 1px solid var(--color-border-on-bg-warning-softer);
+    background: var(--color-bg-warning-softer);
+    color: var(--color-text-warning);
+  }
+
+  &.alert {
+    border: 1px solid var(--color-border-on-bg-error-softer);
+    background: var(--color-bg-error-softer);
+    color: var(--color-text-error);
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.hidden-on-touch-devices {
+    @media screen and (pointer: coarse) {
+      display: none;
+    }
+  }
+
+  a {
+    display: inline-block;
+    color: var(--color-text-secondary);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-text-primary);
+      text-decoration: underline;
+    }
+  }
+
+  &.warning a {
+    font-weight: 700;
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+
+  .oauth-code {
+    outline: 0;
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 10px;
+    font-family: $font-monospace, monospace;
+    background: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+    font-size: 14px;
+    margin: 0;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
+    &:focus {
+      background: var(--color-bg-brand-softer);
+    }
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  @media screen and (440px < width <= 740px) {
+    margin-top: 40px;
+  }
+
+  &.translation-prompt {
+    text-align: unset;
+    color: unset;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+}
+
+.flash-message-stack {
+  margin-bottom: 30px;
+
+  .flash-message {
+    border-radius: 0;
+    margin-bottom: 0;
+    border-top-width: 0;
+
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+      border-top-width: 1px;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+
+      &:first-child {
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+.form-footer {
+  margin-top: 30px;
+  text-align: center;
+
+  a {
+    color: var(--color-text-secondary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.quick-nav {
+  list-style: none;
+  margin-bottom: 25px;
+  font-size: 14px;
+
+  li {
+    display: inline-block;
+    margin-inline-end: 10px;
+  }
+
+  a {
+    color: var(--color-text-brand);
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 700;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-text-brand-soft);
+    }
+  }
+}
+
+.oauth-prompt,
+.follow-prompt {
+  margin-bottom: 30px;
+  color: var(--color-text-secondary);
+
+  h2 {
+    font-size: 16px;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  strong {
+    color: var(--color-text-primary);
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.oauth-prompt {
+  h3 {
+    color: var(--color-text-primary);
+    font-size: 17px;
+    line-height: 22px;
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 18px;
+    margin-bottom: 30px;
+  }
+
+  .permissions-list {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    background: var(--color-bg-secondary);
+    margin-bottom: 30px;
+  }
+
+  .actions {
+    margin: 0 -10px;
+    display: flex;
+
+    form {
+      box-sizing: border-box;
+      padding: 0 10px;
+      flex: 1 1 auto;
+      min-height: 1px;
+      width: 50%;
+    }
+  }
+}
+
+.qr-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.qr-code {
+  flex: 0 0 auto;
+  background: white;
+  padding: 4px;
+  margin: 0 10px 20px 0;
+  box-shadow: 0 0 15px var(--color-shadow-primary);
+  display: inline-block;
+
+  svg {
+    display: block;
+    margin: 0;
+  }
+}
+
+.qr-alternative {
+  margin-bottom: 20px;
+  color: var(--color-text-primary);
+  flex: 150px;
+
+  samp {
+    display: block;
+    font-size: 14px;
+  }
+}
+
+.action-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .actions,
+  .pagination {
+    flex: 1 1 auto;
+  }
+
+  .actions {
+    padding: 30px 0;
+    padding-inline-end: 20px;
+    flex: 0 0 auto;
+  }
+}
+
+.post-follow-actions {
+  text-align: center;
+  color: var(--color-text-secondary);
+
+  div {
+    margin-bottom: 4px;
+  }
+}
+
+.alternative-login {
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  h4 {
+    font-size: 16px;
+    color: var(--color-text-primary);
+    text-align: center;
+    margin-bottom: 20px;
+    border: 0;
+    padding: 0;
+  }
+
+  .button {
+    display: block;
+  }
+}
+
+.scope-danger {
+  color: var(--color-text-error);
+}
+
+.form_admin_settings_site_short_description,
+.form_admin_settings_site_description,
+.form_admin_settings_site_extended_description,
+.form_admin_settings_site_terms,
+.form_admin_settings_custom_css,
+.form_admin_settings_closed_registrations_message {
+  textarea {
+    font-family: $font-monospace, monospace;
+  }
+}
+
+.input-copy {
+  color: var(--color-text-primary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding-inline-end: 4px;
+  position: relative;
+  top: 1px;
+  transition: border-color 300ms linear;
+
+  &__wrapper {
+    flex: 1 1 auto;
+  }
+
+  input[type='text'] {
+    background: transparent;
+    border: 0;
+    padding: 10px;
+    font-size: 14px;
+    font-family: $font-monospace, monospace;
+  }
+
+  button {
+    flex: 0 0 auto;
+    margin: 4px;
+    text-transform: none;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 7px 18px;
+    padding-bottom: 6px;
+    width: auto;
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    border-color: var(--color-text-success);
+    transition: none;
+
+    button {
+      background: var(--color-bg-success-base);
+      transition: none;
+    }
+  }
+}
+
+.input.user_confirm_password,
+.input.user_website {
+  &:not(.field_with_errors) {
+    display: none;
+  }
+}
+
+.simple_form .h-captcha {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.permissions-list {
+  &__item {
+    padding: 15px;
+    color: var(--color-text-primary);
+    border-bottom: 1px solid var(--color-border-primary);
+    display: flex;
+    align-items: center;
+
+    &__text {
+      flex: 1 1 auto;
+
+      &__title {
+        font-weight: 500;
+      }
+
+      &__type {
+        color: var(--color-text-secondary);
+        overflow-wrap: anywhere;
+      }
+    }
+
+    &__icon {
+      flex: 0 0 auto;
+      font-size: 18px;
+      width: 30px;
+      color: var(--color-text-success);
+      display: flex;
+      align-items: center;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+// Only remove padding when listing applications, to prevent styling issues on
+// the Authorization page.
+.applications-list {
+  .permissions-list__item:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.keywords-table {
+  thead {
+    th {
+      white-space: nowrap;
+    }
+
+    th:first-child {
+      width: 100%;
+    }
+  }
+
+  tfoot {
+    td {
+      border: 0;
+    }
+  }
+
+  .input.string {
+    margin-bottom: 0;
+  }
+
+  .label_input__wrapper {
+    margin-top: 10px;
+  }
+
+  .table-action-link {
+    margin-top: 10px;
+    white-space: nowrap;
+  }
+}
+
+.progress-tracker {
+  display: flex;
+  align-items: center;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+
+  li {
+    flex: 0 0 auto;
+    position: relative;
+  }
+
+  .separator {
+    height: 2px;
+    background: var(--color-border-primary);
+    flex: 1 1 auto;
+
+    &.completed {
+      background: var(--color-text-brand);
+    }
+  }
+
+  .circle {
+    box-sizing: border-box;
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 2px solid var(--color-border-primary);
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+    }
+  }
+
+  .label {
+    position: absolute;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    padding-top: 10px;
+    text-align: center;
+    width: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  li:first-child .label {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    text-align: start;
+    transform: none;
+  }
+
+  li:last-child .label {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    text-align: end;
+    transform: none;
+  }
+
+  .active .circle {
+    border-color: var(--color-text-brand);
+
+    &::before {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--color-text-brand);
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .completed .circle {
+    border-color: var(--color-text-brand);
+    background: var(--color-text-brand);
+  }
+}
+
+.app-form {
+  padding: 16px;
+
+  &__avatar-input,
+  &__header-input {
+    display: block;
+    border-radius: 8px;
+    background: var(--color-bg-secondary);
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--color-bg-brand-softer);
+    }
+
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 8px;
+      z-index: 0;
+    }
+
+    .icon {
+      position: absolute;
+      inset-inline-start: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--color-text-secondary);
+      z-index: 3;
+    }
+
+    &.selected .icon {
+      color: var(--color-text-primary);
+      transform: none;
+      inset-inline-start: auto;
+      inset-inline-end: 8px;
+      top: auto;
+      bottom: 8px;
+    }
+
+    &.invalid img {
+      outline: 1px solid var(--color-text-error);
+      outline-offset: -1px;
+    }
+
+    &.invalid::before {
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background: var(--color-bg-error-softer);
+      z-index: 2;
+      border-radius: 8px;
+    }
+  }
+
+  &__avatar-input {
+    width: 80px;
+    height: 80px;
+  }
+
+  &__header-input {
+    aspect-ratio: 580/193;
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: var(--color-text-secondary);
+    font-size: 14px;
+    line-height: 20px;
+
+    .icon {
+      flex: 0 0 auto;
+    }
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    &__label {
+      flex: 1 1 auto;
+
+      strong {
+        color: var(--color-text-primary);
+        font-weight: 600;
+      }
+
+      .hint {
+        display: block;
+        font-size: 14px;
+        color: var(--color-text-secondary);
+      }
+
+      .recommended {
+        position: absolute;
+        margin: 0 4px;
+        margin-top: -2px;
+      }
+    }
+
+    &__toggle {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+
+    &__toggle > div {
+      display: flex;
+      border-inline-start: 1px solid var(--color-border-primary);
+      padding-inline-start: 16px;
+    }
+  }
+
+  &__link {
+    display: flex;
+    gap: 16px;
+    padding: 8px 0;
+    align-items: center;
+    text-decoration: none;
+    color: var(--color-text-primary);
+    margin-bottom: 16px;
+
+    &__text {
+      flex: 1 1 auto;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--color-text-secondary);
+
+      strong {
+        font-weight: 600;
+        display: block;
+        color: var(--color-text-primary);
+      }
+
+      .icon {
+        vertical-align: -5px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/lists.scss b/app/javascript/styles_new/mastodon/lists.scss
new file mode 100644
index 00000000000..6019cd80028
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/lists.scss
@@ -0,0 +1,19 @@
+.no-list {
+  list-style: none;
+
+  li {
+    display: inline-block;
+    margin: 0 5px;
+  }
+}
+
+.recovery-codes {
+  list-style: none;
+  margin: 0 auto;
+
+  li {
+    font-size: 125%;
+    line-height: 1.5;
+    letter-spacing: 1px;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/modal.scss b/app/javascript/styles_new/mastodon/modal.scss
new file mode 100644
index 00000000000..6af2a182b63
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/modal.scss
@@ -0,0 +1,53 @@
+@use 'variables' as *;
+
+.modal-layout {
+  background: var(--color-bg-brand-softer);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0;
+}
+
+.modal-layout__mastodon {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  > div {
+    flex: 1;
+    max-height: 235px;
+    position: relative;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: 100%;
+      position: absolute;
+      bottom: 0;
+      inset-inline-start: 0;
+    }
+  }
+}
+
+@media screen and (width <= 600px) {
+  .account-header {
+    margin-top: 0;
+  }
+}
+
+.with-zig-zag-decoration {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: auto 0 0;
+    height: 32px;
+    background-color: var(--color-bg-brand-softer);
+
+    /* Decorative zig-zag pattern at the bottom of the page */
+    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');
+    mask-position: bottom;
+    mask-repeat: repeat-x;
+    z-index: -1;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/polls.scss b/app/javascript/styles_new/mastodon/polls.scss
new file mode 100644
index 00000000000..19fb8dd505f
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/polls.scss
@@ -0,0 +1,232 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.poll {
+  margin-top: 16px;
+  font-size: 14px;
+
+  li {
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  &__chart {
+    border-radius: 4px;
+    display: block;
+    background: rgb(from var(--color-text-brand) r g b / 60%);
+    height: 5px;
+    min-width: 1%;
+
+    &.leading {
+      background: var(--color-text-brand);
+    }
+  }
+
+  progress {
+    border: 0;
+    display: block;
+    width: 100%;
+    height: 5px;
+    appearance: none;
+    background: transparent;
+
+    &::-webkit-progress-bar {
+      background: transparent;
+    }
+
+    // Those rules need to be entirely separate or they won't work, hence the
+    // duplication
+    &::-moz-progress-bar {
+      border-radius: 4px;
+      background: rgb(from var(--color-text-brand) r g b / 60%);
+    }
+
+    &::-webkit-progress-value {
+      border-radius: 4px;
+      background: rgb(from var(--color-text-brand) r g b / 60%);
+    }
+  }
+
+  &__option {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 0;
+    line-height: 18px;
+    cursor: default;
+    overflow: hidden;
+
+    &__text {
+      display: inline-block;
+      overflow-wrap: break-word;
+      max-width: calc(100% - 45px - 25px);
+    }
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      display: none;
+    }
+
+    .autosuggest-input {
+      flex: 1 1 auto;
+    }
+
+    input[type='text'] {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      font-size: 14px;
+      color: var(--color-text-primary);
+      outline: 0;
+      font-family: inherit;
+      background: var(--color-bg-primary);
+      border: 1px solid var(--color-text-secondary);
+      border-radius: 4px;
+      padding: 8px 12px;
+
+      &:focus {
+        border-color: var(--color-text-brand);
+      }
+
+      @media screen and (width <= 600px) {
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    &.selectable {
+      cursor: pointer;
+    }
+
+    &.editable,
+    &.disabled {
+      align-items: center;
+      overflow: visible;
+    }
+  }
+
+  &__input {
+    display: block;
+    position: relative;
+    border: 1px solid var(--color-text-secondary);
+    box-sizing: border-box;
+    width: 17px;
+    height: 17px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+
+    &.checkbox {
+      border-radius: 4px;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: var(--color-text-success);
+      border-width: 4px;
+    }
+
+    &.active {
+      background-color: var(--color-bg-success-base);
+      border-color: var(--color-text-success);
+    }
+
+    &::-moz-focus-inner {
+      outline: 0 !important;
+      border: 0;
+    }
+
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
+    &.disabled {
+      border-color: var(--color-text-disabled);
+
+      &.active {
+        background: var(--color-text-disabled);
+      }
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: var(--color-text-disabled);
+        border-width: 1px;
+      }
+    }
+  }
+
+  &__option.editable &__input,
+  &__option.disabled &__input {
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: var(--color-text-primary);
+      border-width: 1px;
+    }
+  }
+
+  &__number {
+    display: inline-block;
+    width: 45px;
+    font-weight: 700;
+    flex: 0 0 45px;
+  }
+
+  &__voted {
+    padding: 0 5px;
+    display: inline-block;
+
+    &__mark {
+      font-size: 18px;
+    }
+  }
+
+  &__footer {
+    padding-top: 6px;
+    padding-bottom: 5px;
+    color: var(--color-text-tertiary);
+  }
+
+  &__link {
+    display: inline;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    color: var(--color-text-tertiary);
+    text-decoration: underline;
+    font-size: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active,
+    &:focus {
+      background-color: var(--color-bg-secondary);
+    }
+  }
+
+  .button {
+    height: 36px;
+    padding: 0 16px;
+    margin-inline-end: 10px;
+    font-size: 14px;
+  }
+}
+
+.muted .poll {
+  color: var(--color-text-tertiary);
+
+  &__chart {
+    background: rgb(from var(--color-text-brand) r g b / 40%);
+
+    &.leading {
+      background: rgb(from var(--color-text-brand) r g b / 60%);
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/reset.scss b/app/javascript/styles_new/mastodon/reset.scss
new file mode 100644
index 00000000000..3644b94cdf6
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/reset.scss
@@ -0,0 +1,58 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html:has(body.custom-scrollbars) {
+  scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
+}
diff --git a/app/javascript/styles_new/mastodon/rich_text.scss b/app/javascript/styles_new/mastodon/rich_text.scss
new file mode 100644
index 00000000000..4ac3f025fec
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/rich_text.scss
@@ -0,0 +1,116 @@
+.status__content__text,
+.e-content,
+.edit-indicator__content,
+.reply-indicator__content {
+  code {
+    background: var(--rich-text-container-color);
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+    font-size: 0.85em;
+  }
+
+  pre {
+    background: var(--rich-text-container-color);
+    padding: 8px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+
+    code {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  pre,
+  blockquote {
+    margin-bottom: 22px;
+    white-space: pre-wrap;
+    unicode-bidi: plaintext;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  blockquote {
+    padding-inline-start: 32px;
+    color: var(--rich-text-text-color);
+    white-space: normal;
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      width: 24px;
+      height: 20px;
+      mask-image: url('@/images/quote.svg');
+      background-color: var(--rich-text-decorations-color);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 0;
+    }
+
+    blockquote {
+      margin-top: 4px;
+      border-inline-start: 3px solid var(--rich-text-decorations-color);
+      padding-inline-start: 16px;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  & > ul,
+  & > ol {
+    margin-bottom: 22px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  b,
+  strong {
+    font-weight: 700;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  ul,
+  ol {
+    padding-inline-start: 24px;
+
+    li {
+      padding-inline-start: 8px;
+
+      &::marker {
+        text-align: end;
+      }
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ul {
+    list-style-type: '•';
+
+    li::marker {
+      text-align: start;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/rtl.scss b/app/javascript/styles_new/mastodon/rtl.scss
new file mode 100644
index 00000000000..48935b75d74
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/rtl.scss
@@ -0,0 +1,50 @@
+@use 'variables' as *;
+
+body.rtl {
+  direction: rtl;
+
+  .reactions-bar {
+    direction: rtl;
+  }
+
+  .announcements__mastodon,
+  .drawer__inner__mastodon > img {
+    transform: scaleX(-1);
+  }
+
+  .compose-form .autosuggest-textarea__textarea {
+    padding-right: 10px;
+    padding-left: 10px + 22px;
+  }
+
+  .columns-area {
+    direction: rtl;
+  }
+
+  .account__avatar-wrapper {
+    float: right;
+  }
+
+  .column-header__setting-arrows {
+    float: left;
+  }
+
+  .admin-wrapper {
+    direction: rtl;
+  }
+
+  .react-swipeable-view-container > * {
+    direction: rtl;
+  }
+
+  .column-back-button__icon {
+    transform: scale(-1, 1);
+  }
+
+  .dismissable-banner,
+  .warning-banner {
+    &__action {
+      float: left;
+    }
+  }
+}
diff --git a/app/javascript/styles_new/mastodon/tables.scss b/app/javascript/styles_new/mastodon/tables.scss
new file mode 100644
index 00000000000..8e303aff685
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/tables.scss
@@ -0,0 +1,375 @@
+@use 'variables' as *;
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 8px;
+    line-height: 18px;
+    vertical-align: top;
+    border-bottom: 1px solid var(--color-border-primary);
+    text-align: start;
+    background: var(--color-bg-primary);
+
+    &.critical {
+      font-weight: 700;
+      color: var(--color-text-warning);
+    }
+  }
+
+  & > thead > tr > th {
+    vertical-align: bottom;
+    font-weight: 500;
+  }
+
+  & > tbody > tr > th {
+    font-weight: 500;
+  }
+
+  & > tbody > tr:nth-child(odd) > td,
+  & > tbody > tr:nth-child(odd) > th {
+    background: var(--color-bg-primary);
+  }
+
+  & > tbody > tr:last-child > td,
+  & > tbody > tr:last-child > th {
+    border-bottom: 0;
+  }
+
+  a {
+    color: var(--color-text-secondary);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-text-brand);
+    }
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  &.inline-table {
+    & > tbody > tr:nth-child(odd) {
+      & > td,
+      & > th {
+        background: transparent;
+      }
+    }
+
+    & > tbody > tr:first-child {
+      & > td,
+      & > th {
+        border-top: 0;
+      }
+    }
+  }
+
+  &.horizontal-table {
+    border-collapse: collapse;
+    border-style: hidden;
+
+    & > tbody > tr > th,
+    & > tbody > tr > td {
+      padding: 11px 10px;
+      background: transparent;
+      border: 1px solid var(--color-border-primary);
+      color: var(--color-text-primary);
+    }
+
+    & > tbody > tr > th {
+      color: var(--color-text-secondary);
+      font-weight: 600;
+    }
+  }
+
+  &.batch-table {
+    & > thead > tr > th {
+      background: var(--color-bg-primary);
+      border-top: 1px solid var(--color-border-primary);
+      border-bottom: 1px solid var(--color-border-primary);
+
+      &:first-child {
+        border-radius: 4px 0 0;
+        border-inline-start: 1px solid var(--color-border-primary);
+      }
+
+      &:last-child {
+        border-radius: 0 4px 0 0;
+        border-inline-end: 1px solid var(--color-border-primary);
+      }
+    }
+  }
+
+  &--invites tbody td {
+    vertical-align: middle;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin-bottom: 20px;
+}
+
+samp {
+  font-family: $font-monospace, monospace;
+}
+
+button.table-action-link {
+  background: transparent;
+  border: 0;
+  font: inherit;
+}
+
+button.table-action-link,
+a.table-action-link {
+  text-decoration: none;
+  display: inline-block;
+  margin-inline-end: 5px;
+  padding: 0 10px;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--color-text-brand);
+  }
+
+  &:first-child {
+    padding-inline-start: 0;
+  }
+}
+
+.batch-table {
+  &--no-toolbar {
+    .batch-table__toolbar {
+      position: static;
+      height: 4px;
+      border-bottom: none;
+    }
+  }
+
+  &__toolbar,
+  &__row {
+    display: flex;
+
+    &__select {
+      box-sizing: border-box;
+      padding: 8px 16px;
+      cursor: pointer;
+      min-height: 100%;
+
+      input {
+        margin-top: 8px;
+      }
+
+      &--aligned {
+        display: flex;
+        align-items: center;
+
+        input {
+          margin-top: 0;
+        }
+      }
+    }
+
+    &__actions,
+    &__content {
+      padding: 8px 0;
+      padding-inline-end: 16px;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    border: 1px solid var(--color-border-primary);
+    background: var(--color-bg-primary);
+    border-radius: 4px 4px 0 0;
+    height: 47px;
+    align-items: center;
+
+    &__actions {
+      text-align: end;
+      padding-inline-end: 16px - 5px;
+
+      .table-action-link {
+        padding: 0;
+      }
+    }
+  }
+
+  &__select-all {
+    background: var(--color-bg-primary);
+    height: 47px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border-primary);
+    border-top: 0;
+    color: var(--color-text-primary);
+    display: none;
+
+    &.active {
+      display: flex;
+    }
+
+    .selected,
+    .not-selected {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+
+    strong {
+      font-weight: 700;
+    }
+
+    span {
+      padding: 8px;
+      display: inline-block;
+    }
+
+    button {
+      background: transparent;
+      border: 0;
+      font: inherit;
+      color: var(--color-text-brand);
+      border-radius: 4px;
+      font-weight: 700;
+      padding: 8px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: var(--color-bg-secondary);
+      }
+    }
+  }
+
+  &__form {
+    padding: 16px;
+    border: 1px solid var(--color-border-primary);
+    border-top: 0;
+    background: var(--color-bg-primary);
+
+    .fields-row {
+      padding-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &__row {
+    border: 1px solid var(--color-border-primary);
+    border-top: 0;
+    background: var(--color-bg-primary);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      .optional &:first-child {
+        border-top: 1px solid var(--color-border-primary);
+      }
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+
+    &__content {
+      padding-top: 12px;
+      padding-bottom: 16px;
+      overflow: hidden;
+
+      &--unpadded {
+        padding: 0;
+      }
+
+      &--padded {
+        padding: 12px 16px 16px;
+      }
+
+      &--with-image {
+        display: flex;
+        align-items: center;
+      }
+
+      &__image {
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-inline-end: 10px;
+
+        .emojione {
+          width: 32px;
+          height: 32px;
+        }
+      }
+
+      &__text {
+        flex: 1 1 auto;
+      }
+
+      &__quote {
+        padding: 12px;
+        padding-top: 0;
+      }
+
+      &__extra {
+        flex: 0 0 auto;
+        text-align: end;
+        color: var(--color-text-secondary);
+        font-weight: 500;
+      }
+    }
+
+    .directory__tag {
+      margin: 0;
+      width: 100%;
+
+      a {
+        background: transparent;
+        border-radius: 0;
+      }
+    }
+  }
+
+  &.optional .batch-table__toolbar,
+  &.optional .batch-table__row__select {
+    @media screen and (max-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  // Reset the status card to not have borders, background or padding when
+  // inline in the table of statuses
+  .batch-table__row__content > .status__card {
+    border: none;
+    background: none;
+    padding: 0;
+  }
+
+  @media screen and (width <= 870px) {
+    .accounts-table tbody td.optional {
+      display: none;
+    }
+  }
+}
+
+.one-liner {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/app/javascript/styles_new/mastodon/widgets.scss b/app/javascript/styles_new/mastodon/widgets.scss
new file mode 100644
index 00000000000..c35f58eda3f
--- /dev/null
+++ b/app/javascript/styles_new/mastodon/widgets.scss
@@ -0,0 +1,183 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.directory {
+  &__tag {
+    box-sizing: border-box;
+    margin-bottom: 10px;
+
+    & > a,
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid var(--color-border-primary);
+      border-radius: 4px;
+      padding: 15px;
+      text-decoration: none;
+      color: inherit;
+      box-shadow: 0 0 15px var(--color-shadow-primary);
+    }
+
+    & > a {
+      &:hover,
+      &:active,
+      &:focus {
+        background: var(--color-bg-primary);
+      }
+    }
+
+    &.active > a {
+      background: var(--color-bg-brand-base);
+      cursor: default;
+    }
+
+    &.disabled > div {
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    h4 {
+      flex: 1 1 auto;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--color-text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .fa {
+        color: var(--color-text-secondary);
+      }
+
+      small {
+        display: block;
+        font-weight: 400;
+        font-size: 15px;
+        margin-top: 8px;
+        color: var(--color-text-secondary);
+      }
+    }
+
+    &.active h4 {
+      &,
+      .fa,
+      small,
+      .trends__item__current {
+        color: var(--color-text-primary);
+      }
+    }
+
+    .avatar-stack {
+      flex: 0 0 auto;
+      width: (36px + 4px) * 3;
+    }
+
+    &.active .avatar-stack .account__avatar {
+      border-color: var(--color-text-brand);
+    }
+
+    .trends__item__current {
+      padding-inline-end: 0;
+    }
+  }
+}
+
+.accounts-table {
+  width: 100%;
+
+  .account {
+    max-width: calc(56px + 30ch);
+    padding: 0;
+    border: 0;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  thead th {
+    text-align: center;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+    font-weight: 700;
+    padding: 10px;
+
+    &:first-child {
+      text-align: start;
+    }
+  }
+
+  tbody td {
+    padding: 15px 0;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+
+  &__count {
+    width: 120px;
+    text-align: center;
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+
+    small {
+      display: block;
+      color: var(--color-text-secondary);
+      font-weight: 400;
+      font-size: 14px;
+    }
+  }
+
+  tbody td.accounts-table__extra {
+    width: 120px;
+    text-align: end;
+    color: var(--color-text-secondary);
+    padding-inline-end: 16px;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      &:focus,
+      &:hover,
+      &:active {
+        color: var(--color-text-brand);
+      }
+    }
+  }
+
+  &__comment {
+    width: 50%;
+    vertical-align: initial !important;
+  }
+
+  tbody td.accounts-table__interrelationships {
+    width: 21px;
+    padding-inline-end: 16px;
+  }
+
+  .icon {
+    &.active {
+      color: var(--color-text-brand);
+    }
+
+    &.passive {
+      color: var(--color-text-warning);
+    }
+
+    &.active.passive {
+      color: var(--color-text-success);
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    tbody td.optional {
+      display: none;
+    }
+  }
+}
diff --git a/app/views/admin/domain_blocks/confirm_suspension.html.haml b/app/views/admin/domain_blocks/confirm_suspension.html.haml
index e82026d3a2b..5b56c1903f6 100644
--- a/app/views/admin/domain_blocks/confirm_suspension.html.haml
+++ b/app/views/admin/domain_blocks/confirm_suspension.html.haml
@@ -18,5 +18,5 @@
                           domain: @domain_block.domain
 
   .actions
-    = link_to t('.cancel'), admin_instances_path, class: 'button button-tertiary'
+    = link_to t('.cancel'), admin_instances_path, class: 'button button-secondary'
     = f.button :submit, t('.confirm'), class: 'button button--dangerous', name: :confirm
diff --git a/app/views/admin/reports/actions/preview.html.haml b/app/views/admin/reports/actions/preview.html.haml
index 5a90bf1b8f6..bfd7fd5a409 100644
--- a/app/views/admin/reports/actions/preview.html.haml
+++ b/app/views/admin/reports/actions/preview.html.haml
@@ -76,7 +76,7 @@
     %hr.spacer/
 
   .actions
-    = link_to t('admin.reports.cancel'), admin_report_path(@report), class: 'button button-tertiary'
+    = link_to t('admin.reports.cancel'), admin_report_path(@report), class: 'button button-secondary'
     = form.button t('admin.reports.confirm'),
                   name: :confirm,
                   class: 'button',
diff --git a/app/views/admin/roles/_role.html.haml b/app/views/admin/roles/_role.html.haml
index ddaca5d8a9f..df813bbaf43 100644
--- a/app/views/admin/roles/_role.html.haml
+++ b/app/views/admin/roles/_role.html.haml
@@ -1,7 +1,7 @@
 .announcements-list__item
   - if can?(:update, role)
     = link_to edit_admin_role_path(role), class: 'announcements-list__item__title' do
-      %span.user-role
+      %span
         = material_symbol 'group'
 
         - if role.everyone?
@@ -10,13 +10,12 @@
           = role.name
   - else
     %span.announcements-list__item__title
-      %span.user-role
-        = material_symbol 'group'
+      = material_symbol 'group'
 
-        - if role.everyone?
-          = t('admin.roles.everyone')
-        - else
-          = role.name
+      - if role.everyone?
+        = t('admin.roles.everyone')
+      - else
+        = role.name
 
   .announcements-list__item__action-bar
     .announcements-list__item__meta
diff --git a/app/views/auth/registrations/rules.html.haml b/app/views/auth/registrations/rules.html.haml
index 59e7c9072fb..a5a96c57378 100644
--- a/app/views/auth/registrations/rules.html.haml
+++ b/app/views/auth/registrations/rules.html.haml
@@ -27,4 +27,4 @@
   .stacked-actions
     - accept_path = @invite_code.present? ? public_invite_url(invite_code: @invite_code, accept: @accept_token) : new_user_registration_path(accept: @accept_token)
     = link_to t('auth.rules.accept'), accept_path, class: 'button'
-    = link_to t('auth.rules.back'), root_path, class: 'button button-tertiary'
+    = link_to t('auth.rules.back'), root_path, class: 'button button-secondary'
diff --git a/app/views/layouts/modal.html.haml b/app/views/layouts/modal.html.haml
index d25dd22d375..26a03472fe2 100644
--- a/app/views/layouts/modal.html.haml
+++ b/app/views/layouts/modal.html.haml
@@ -1,7 +1,7 @@
 - content_for :header_tags do
   = vite_typescript_tag 'public.tsx', crossorigin: 'anonymous'
 
-- content_for :body_classes, 'modal-layout compose-standalone'
+- content_for :body_classes, 'modal-layout with-zig-zag-decoration compose-standalone'
 
 - content_for :content do
   - if user_signed_in? && !@hide_header
diff --git a/app/views/settings/imports/show.html.haml b/app/views/settings/imports/show.html.haml
index dd18ac2168c..40b06e6efb1 100644
--- a/app/views/settings/imports/show.html.haml
+++ b/app/views/settings/imports/show.html.haml
@@ -11,5 +11,5 @@
 
 .simple_form
   .actions
-    = link_to t('generic.cancel'), settings_import_path(@bulk_import), method: :delete, class: 'button button-tertiary'
+    = link_to t('generic.cancel'), settings_import_path(@bulk_import), method: :delete, class: 'button button-secondary'
     = link_to t('generic.confirm'), confirm_settings_import_path(@bulk_import), method: :post, class: 'button'
diff --git a/config/vite/plugin-mastodon-themes.ts b/config/vite/plugin-mastodon-themes.ts
index 251d2d8e724..3e7bc7a8a8f 100644
--- a/config/vite/plugin-mastodon-themes.ts
+++ b/config/vite/plugin-mastodon-themes.ts
@@ -43,6 +43,10 @@ export function MastodonThemes(): Plugin {
 
       for (const [themeName, themePath] of Object.entries(themes)) {
         entrypoints[`themes/${themeName}`] = path.resolve(jsRoot, themePath);
+        entrypoints[`themes/${themeName}_theme_tokens`] = path.resolve(
+          jsRoot,
+          themePath.replace('styles/', 'styles_new/'),
+        );
       }
 
       return {
@@ -64,7 +68,11 @@ export function MastodonThemes(): Plugin {
         // Rewrite the URL to the entrypoint if it matches a theme.
         if (isThemeFile(req.url ?? '', themes)) {
           const themeName = pathToThemeName(req.url ?? '');
-          req.url = `/packs-dev/${themes[themeName]}`;
+          const themePath = `/packs-dev/${themes[themeName]}`;
+          const isThemeTokenRequest = req.url.includes('_theme_tokens');
+          req.url = isThemeTokenRequest
+            ? themePath.replace('styles/', 'styles_new/')
+            : themePath;
         }
         next();
       });
@@ -77,7 +85,7 @@ export function MastodonThemes(): Plugin {
       const themePathToName = new Map(
         Object.entries(themes).map(([themeName, themePath]) => [
           path.resolve(jsRoot, themePath),
-          `/themes/${themeName}`,
+          `/themes/${areThemeTokensEnabled() ? `${themeName}_theme_tokens` : themeName}`,
         ]),
       );
       const themeNames = new Set<string>();
@@ -140,6 +148,7 @@ async function loadThemesFromConfig(root: string) {
       console.warn(`Invalid theme path "${themePath}" in themes.yml, skipping`);
       continue;
     }
+
     themes[themeName] = themePath;
   }
 
@@ -151,7 +160,7 @@ async function loadThemesFromConfig(root: string) {
 }
 
 function pathToThemeName(file: string) {
-  const basename = path.basename(file);
+  const basename = path.basename(file.replace('_theme_tokens', ''));
   return basename.split(/[.?]/)[0] ?? '';
 }
 
@@ -163,3 +172,12 @@ function isThemeFile(file: string, themes: Themes) {
   const basename = pathToThemeName(file);
   return basename in themes;
 }
+
+function areThemeTokensEnabled() {
+  const raw = process.env.EXPERIMENTAL_FEATURES ?? '';
+  const features = raw
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  return features.includes('theme_tokens');
+}
diff --git a/stylelint.config.js b/stylelint.config.js
index b1f34b7f190..29fe8262aa1 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -2,6 +2,7 @@ module.exports = {
   extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
   ignoreFiles: [
     'app/javascript/styles/mastodon/reset.scss',
+    'app/javascript/styles_new/mastodon/reset.scss',
     'coverage/**/*',
     'node_modules/**/*',
     'public/assets/**/*',
@@ -31,7 +32,7 @@ module.exports = {
   },
   overrides: [
     {
-      'files': ['app/javascript/styles/entrypoints/mailer.scss'],
+      'files': ['app/javascript/styles/entrypoints/mailer.scss', 'app/javascript/styles_new/entrypoints/mailer.scss'],
       rules: {
         'property-no-unknown': [
           true,