@axis-network/butter-col 0.0.0-stage → 0.1.0

package/server/lua/butter/transport.lua

@@ -0,0 +1,248 @@
+-- nginx phase handlers for butter-col's endpoints.
+--
+--   /butter/fetch   HTTP transport (access + header_filter around proxy_pass)
+--   /butter/ws      WebSocket transport (access + header_filter around proxy_pass)
+--   /butter/cookie  document.cookie write-back
+--   /butter/config.js, /butter/health
+--
+-- The Lua code validates and prepares each request; nginx's proxy module
+-- does the actual streaming, keep-alive and TLS work.
+
+local cjson = require "cjson.safe"
+local config = require "butter.config"
+local url = require "butter.url"
+local guard = require "butter.guard"
+local headers = require "butter.headers"
+local session = require "butter.session"
+local store = require "butter.store"
+local limit = require "butter.limit"
+
+local M = {}
+
+local function error_json(code, message)
+  return cjson.encode({ code = code, message = message })
+end
+
+--- Send a JSON error and finish the request.
+local function fail(status, code, message)
+  ngx.status = status
+  ngx.header["Content-Type"] = "application/json"
+  ngx.header["Cache-Control"] = "no-store"
+  ngx.header["X-Butter-Error"] = error_json(code, message)
+  ngx.say(cjson.encode({ error = { code = code, message = message } }))
+  return ngx.exit(ngx.HTTP_OK)
+end
+
+--- "https://host:port" -> does it name this server?
+local function origin_is_self(origin)
+  local host = origin:match("^%a[%w+.-]*://([^/]+)$")
+  return host ~= nil and host:lower() == (ngx.var.http_host or ""):lower()
+end
+
+--- Was this request made by our own pages (and not by another website)?
+local function same_origin()
+  local cfg = config.get()
+  if not cfg.require_same_origin then return true end
+  local site = ngx.var.http_sec_fetch_site
+  if site then return site == "same-origin" end
+  local origin = ngx.var.http_origin
+  if origin then return origin_is_self(origin) end
+  return cfg.allow_non_browser
+end
+
+--- Shared checks; returns the parsed target and the upstream address.
+local function prepare(raw_url, allowed_schemes)
+  local cfg = config.get()
+  if not limit.check(cfg.rate_limit) then
+    return fail(429, "RATE_LIMITED", "Too many requests. Slow down a little.")
+  end
+  if not same_origin() then
+    return fail(403, "FORBIDDEN_ORIGIN", "Transport requests must come from this server's own pages.")
+  end
+  local target, err = url.parse(raw_url)
+  if not target then return fail(400, "INVALID_URL", err) end
+  if not allowed_schemes[target.scheme] then
+    return fail(400, "INVALID_URL", "Unsupported scheme " .. target.scheme .. ".")
+  end
+  local dest, code, message = guard.check(target)
+  if not dest then return fail(code == "DNS_FAILURE" and 502 or 403, code, message) end
+  return target, dest
+end
+
+local function set_upstream(scheme, target, dest)
+  ngx.var.butter_scheme = scheme
+  ngx.var.butter_addr = dest.addr
+  ngx.var.butter_uri = target.path
+  ngx.var.butter_host = target.host_header
+  ngx.var.butter_sni = target.host
+end
+
+--- Remove every incoming header except the ones in `keep`.
+local function clear_request_headers(keep)
+  for name in pairs(ngx.req.get_headers(200, true)) do
+    if not keep[name:lower()] then ngx.req.clear_header(name) end
+  end
+end
+
+local function apply_cookie(sid, target)
+  if not config.get().cookies.enabled then return end
+  local cookie = store.cookie_header(sid, target)
+  if cookie ~= "" then ngx.req.set_header("Cookie", cookie) end
+end
+
+local HTTP_SCHEMES = { http = true, https = true }
+local WS_SCHEMES = { ws = true, wss = true }
+
+-- /butter/fetch ---------------------------------------------------------------
+
+function M.access_fetch()
+  local target, dest = prepare(ngx.var.http_x_butter_url, HTTP_SCHEMES)
+  if not target then return end
+
+  local decoded = cjson.decode(ngx.var.http_x_butter_headers or "{}")
+  local list, err = headers.sanitize_request(decoded)
+  if not list then return fail(400, "INVALID_HEADERS", err) end
+
+  local want_cookies = ngx.var.http_x_butter_want_cookies == "1"
+  local sid, new_session = session.get()
+
+  clear_request_headers(headers.KEEP_OUTER)
+  for _, header in ipairs(list) do
+    ngx.req.set_header(header[1], header[2])
+  end
+  local cfg = config.get()
+  if cfg.user_agent then ngx.req.set_header("User-Agent", cfg.user_agent) end
+  apply_cookie(sid, target)
+
+  set_upstream(target.scheme, target, dest)
+  ngx.ctx.butter = { sid = sid, new_session = new_session, target = target, want_cookies = want_cookies }
+end
+
+--- Collect upstream Set-Cookie headers into the jar.
+local function capture_cookies(ctx, values)
+  if #values > 0 and config.get().cookies.enabled then
+    store.set_cookies(ctx.sid, ctx.target, values)
+  end
+end
+
+function M.header_filter_fetch()
+  local ctx = ngx.ctx.butter
+  if not ctx then return end
+
+  local status = ngx.status
+  local reported, cookies = {}, {}
+  for name, value in pairs(ngx.resp.get_headers(200, true)) do
+    local lower = name:lower()
+    local values = type(value) == "table" and value or { value }
+    if lower == "set-cookie" then
+      for _, v in ipairs(values) do cookies[#cookies + 1] = v end
+    elseif not headers.RESPONSE_SKIP[lower] then
+      for _, v in ipairs(values) do reported[#reported + 1] = { name, v } end
+    end
+    if not headers.OUTER_KEEP[lower] then ngx.header[name] = nil end
+  end
+  capture_cookies(ctx, cookies)
+
+  -- The real status travels in a header: a 3xx would make the browser follow
+  -- the redirect itself, and a 401 would pop up an auth dialog.
+  ngx.status = ngx.HTTP_OK
+  ngx.header["X-Butter-Status"] = tostring(status)
+  ngx.header["X-Butter-Status-Text"] = headers.reason(status)
+  ngx.header["X-Butter-Headers"] = #reported == 0 and "[]" or cjson.encode(reported)
+  ngx.header["Content-Type"] = "application/octet-stream"
+  ngx.header["Cache-Control"] = "no-store"
+  if ctx.want_cookies then
+    ngx.header["X-Butter-Document-Cookies"] = store.document_cookie(ctx.sid, ctx.target)
+  end
+  if ctx.new_session then ngx.header["Set-Cookie"] = session.cookie(ctx.sid) end
+end
+
+-- /butter/ws -------------------------------------------------------------------
+
+function M.access_ws()
+  if (ngx.var.http_upgrade or ""):lower() ~= "websocket" then
+    return fail(400, "NOT_WEBSOCKET", "Expected a WebSocket upgrade request.")
+  end
+  local args = ngx.req.get_uri_args(10)
+  local raw_url = type(args.url) == "string" and args.url or nil
+  local target, dest = prepare(raw_url, WS_SCHEMES)
+  if not target then return end
+
+  -- Origin the target site should see: the proxied page's own origin.
+  local page_origin = type(args.origin) == "string" and url.parse(args.origin .. "/")
+  local origin = page_origin and HTTP_SCHEMES[page_origin.scheme] and page_origin.origin
+    or ((target.secure and "https://" or "http://") .. target.host_header)
+
+  local sid, new_session = session.get()
+  for _, name in ipairs({ "Cookie", "Origin", "Referer", "X-Forwarded-For", "X-Real-IP", "Forwarded" }) do
+    ngx.req.clear_header(name)
+  end
+  ngx.req.set_header("Origin", origin)
+  local cfg = config.get()
+  if cfg.user_agent then ngx.req.set_header("User-Agent", cfg.user_agent) end
+  apply_cookie(sid, target)
+
+  set_upstream(target.secure and "https" or "http", target, dest)
+  ngx.ctx.butter = { sid = sid, new_session = new_session, target = target }
+end
+
+function M.header_filter_ws()
+  local ctx = ngx.ctx.butter
+  if not ctx then return end
+  local values = ngx.header["Set-Cookie"]
+  if values then
+    capture_cookies(ctx, type(values) == "table" and values or { values })
+    ngx.header["Set-Cookie"] = nil
+  end
+  if ctx.new_session then ngx.header["Set-Cookie"] = session.cookie(ctx.sid) end
+end
+
+-- Errors from nginx's proxy module (connection refused, TLS failure, timeout).
+function M.upstream_error()
+  local status = ngx.status
+  if status == 504 then
+    return fail(504, "UPSTREAM_TIMEOUT", "The site took too long to respond.")
+  end
+  return fail(502, "UPSTREAM_UNREACHABLE", "Could not connect to the site (connection refused or reset, or its TLS certificate could not be verified).")
+end
+
+-- /butter/cookie ---------------------------------------------------------------
+
+function M.cookie()
+  if ngx.req.get_method() ~= "POST" then return fail(405, "METHOD_NOT_ALLOWED", "Use POST.") end
+  if not same_origin() then return fail(403, "FORBIDDEN_ORIGIN", "Cross-site cookie writes are not allowed.") end
+  if not config.get().cookies.enabled then return ngx.exit(ngx.HTTP_NO_CONTENT) end
+
+  ngx.req.read_body()
+  local data = cjson.decode(ngx.req.get_body_data() or "")
+  if type(data) ~= "table" or type(data.url) ~= "string" or type(data.cookie) ~= "string" or #data.cookie > 4096 then
+    return fail(400, "INVALID_COOKIE", "Expected {\"url\": string, \"cookie\": string}.")
+  end
+  local target, err = url.parse(data.url)
+  if not target or not HTTP_SCHEMES[target.scheme] then return fail(400, "INVALID_URL", err or "Unsupported scheme.") end
+
+  local sid = session.ensure()
+  store.set_cookies(sid, target, { data.cookie }, { from_script = true })
+  return ngx.exit(ngx.HTTP_NO_CONTENT)
+end
+
+-- /butter/config.js ------------------------------------------------------------
+
+function M.config_js()
+  -- Handing out the session cookie here (the service worker imports this
+  -- script on install) means it exists before the first proxied request.
+  session.ensure()
+  ngx.header["Content-Type"] = "text/javascript; charset=utf-8"
+  ngx.header["Cache-Control"] = "no-cache"
+  ngx.say("self.__butter$config = ", cjson.encode(config.public()), ";")
+end
+
+-- /butter/health ---------------------------------------------------------------
+
+function M.health()
+  ngx.header["Content-Type"] = "application/json"
+  ngx.header["Cache-Control"] = "no-store"
+  ngx.say(cjson.encode({ ok = true, name = "butter-col", version = config.VERSION }))
+end
+
+return M

package/server/lua/butter/url.lua

@@ -0,0 +1,78 @@
+-- Strict parser for the absolute URLs the service worker sends.
+-- Pure Lua (5.1 / LuaJIT / 5.3), no ngx dependency.
+
+local M = {}
+
+local DEFAULT_PORTS = { http = 80, https = 443, ws = 80, wss = 443 }
+local SECURE = { https = true, wss = true }
+
+--- Parse an absolute http(s)/ws(s) URL.
+-- @return table|nil, string|nil  parsed URL, or nil and an error message
+function M.parse(s)
+  if type(s) ~= "string" or s == "" then return nil, "missing URL" end
+  if #s > 8192 then return nil, "URL is too long" end
+  -- URL.href from the browser is always ASCII without spaces or controls;
+  -- anything else could smuggle CR/LF into the upstream request line.
+  if s:find("%c") or s:find(" ", 1, true) or s:find("[\128-\255]") then
+    return nil, "URL contains invalid characters"
+  end
+
+  local scheme, rest = s:match("^(%a[%w+.-]*)://(.*)$")
+  if not scheme then return nil, "not an absolute URL" end
+  scheme = scheme:lower()
+  local default_port = DEFAULT_PORTS[scheme]
+  if not default_port then return nil, "unsupported scheme: " .. scheme end
+
+  local authority, path = rest:match("^([^/?#]*)(.*)$")
+  path = path:gsub("#.*$", "")
+  if path == "" then
+    path = "/"
+  elseif path:sub(1, 1) == "?" then
+    path = "/" .. path
+  end
+  if path:sub(1, 1) ~= "/" then return nil, "invalid path" end
+
+  if authority:find("@", 1, true) then return nil, "credentials in URLs are not allowed" end
+
+  local host, port, ipv6
+  if authority:sub(1, 1) == "[" then
+    host, port = authority:match("^%[([%x:%.]+)%]:?(%d*)$")
+    if not host then return nil, "invalid IPv6 host" end
+    ipv6 = true
+  else
+    host, port = authority:match("^([^:]+):?(%d*)$")
+    if not host then return nil, "invalid host" end
+    host = host:gsub("%.$", "")
+    if host == "" or #host > 253 or not host:match("^[%w%-%._]+$") then
+      return nil, "invalid host"
+    end
+  end
+  host = host:lower()
+
+  local port_num = default_port
+  if port ~= "" then
+    port_num = tonumber(port)
+    if not port_num or port_num < 1 or port_num > 65535 then return nil, "invalid port" end
+  end
+
+  local host_header = ipv6 and ("[" .. host .. "]") or host
+  if port_num ~= default_port then host_header = host_header .. ":" .. string.format("%d", port_num) end
+
+  return {
+    scheme = scheme,
+    host = host,
+    port = port_num,
+    path = path,                       -- path and query, percent-encoded
+    ipv6 = ipv6 or false,
+    secure = SECURE[scheme] or false,
+    host_header = host_header,         -- value for the Host header
+    origin = scheme .. "://" .. host_header,
+  }
+end
+
+--- Path without the query string.
+function M.path_only(path)
+  return (path:gsub("%?.*$", ""))
+end
+
+return M

package/site/app.css

@@ -0,0 +1,373 @@
+/* butter-col frontend
+ *
+ * The identity comes from the logo: a glossy stick of butter with a thick
+ * orange outline, on a cool pantry-blue night. The omnibox is drawn as that
+ * stick of butter; everything around it stays quiet.
+ */
+
+:root {
+  --pantry: #1a2142;       /* page background */
+  --shelf: #242d57;        /* toolbar, panels */
+  --shelf-high: #2f3a6b;   /* hover, inputs on panels */
+  --line: #3a467c;
+  --milk: #fff7dc;         /* text */
+  --haze: #a3abd1;         /* secondary text */
+  --butter: #ffd447;
+  --butter-light: #ffe58a;
+  --butter-deep: #f5bd2c;
+  --crust: #f08a1c;        /* the logo's orange outline */
+  --crust-deep: #c9650b;
+  --on-butter: #3b2a05;    /* text on butter */
+  --danger: #ff8f7a;
+  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
+  --font-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
+  color-scheme: dark;
+}
+
+/* light: a pale periwinkle kitchen in daylight */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --pantry: #eef0ff;
+    --shelf: #ffffff;
+    --shelf-high: #e3e7fb;
+    --line: #cdd3f2;
+    --milk: #1a2142;
+    --haze: #59618c;
+    --danger: #b3261e;
+    color-scheme: light;
+  }
+}
+:root[data-theme="light"] {
+  --pantry: #eef0ff;
+  --shelf: #ffffff;
+  --shelf-high: #e3e7fb;
+  --line: #cdd3f2;
+  --milk: #1a2142;
+  --haze: #59618c;
+  --danger: #b3261e;
+  color-scheme: light;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  background: var(--pantry);
+  color: var(--milk);
+  font: 17px/1.5 var(--font-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+button, input, select { font: inherit; color: inherit; }
+
+:focus-visible { outline: 3px solid var(--crust); outline-offset: 2px; }
+
+[hidden] { display: none !important; }
+
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* ---- shared controls ---------------------------------------------------- */
+
+.icon-button {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--haze);
+  cursor: pointer;
+}
+.icon-button:hover { background: var(--shelf-high); color: var(--milk); }
+.icon-button:disabled { opacity: 0.35; cursor: default; background: transparent; }
+.icon-button svg {
+  width: 22px; height: 22px;
+  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+}
+
+.text-button {
+  border: 0;
+  padding: 0 0.15em;
+  background: none;
+  color: var(--butter);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+:root[data-theme="light"] .text-button { color: var(--crust-deep); }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .text-button { color: var(--crust-deep); } }
+
+.secondary-button {
+  justify-self: start;
+  padding: 0.55rem 1rem;
+  border: 2px solid var(--line);
+  border-radius: 12px;
+  background: var(--shelf-high);
+  font-weight: 700;
+  cursor: pointer;
+}
+.secondary-button:hover { border-color: var(--crust); }
+
+.notice {
+  margin: 1rem auto 0;
+  max-width: 34rem;
+  padding: 0.75rem 1rem;
+  border-radius: 14px;
+  border: 2px solid var(--danger);
+  color: var(--milk);
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  text-align: left;
+}
+.notice[data-kind="info"] { border-color: var(--line); background: var(--shelf-high); }
+
+/* ---- home --------------------------------------------------------------- */
+
+.home {
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  padding: 16px 16px 40px;
+}
+
+.home-bar { display: flex; justify-content: flex-end; }
+
+.hero {
+  align-self: center;
+  justify-self: center;
+  width: min(44rem, 100%);
+  text-align: center;
+  padding: 2vh 0 4vh;
+}
+
+.hero-logo {
+  display: block;
+  width: min(26rem, 82vw);
+  height: auto;
+  margin: 0 auto 1.25rem;
+  transform-origin: 50% 90%;
+  animation: settle 700ms cubic-bezier(.2, 1.4, .4, 1) both;
+}
+@keyframes settle {
+  from { transform: translateY(-14px) rotate(-3deg) scale(0.96); opacity: 0; }
+  to { transform: none; opacity: 1; }
+}
+
+/* The stick of butter. */
+.stick {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 8px 22px;
+  border: 4px solid var(--crust);
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 6px, transparent 6px) top / 100% 6px no-repeat,
+    linear-gradient(180deg, var(--butter-light) 0%, var(--butter) 46%, var(--butter-deep) 100%);
+  box-shadow:
+    inset 0 -6px 0 rgb(201 101 11 / 0.22),
+    0 7px 0 var(--crust-deep),
+    0 18px 34px rgb(5 8 30 / 0.35);
+}
+.stick:focus-within { outline: 3px solid var(--milk); outline-offset: 4px; }
+.stick:focus-within:has(:focus:not(:focus-visible)) { outline: none; }
+
+.stick-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--on-butter);
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
+  padding: 0.55rem 0;
+}
+.stick-input::placeholder { color: rgb(59 42 5 / 0.62); }
+.stick-input:focus { outline: none; }
+
+.stick-go {
+  flex: none;
+  border: 0;
+  border-radius: 16px;
+  padding: 0.6rem 1.4rem;
+  background: var(--crust);
+  color: #fff7dc;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.15rem;
+  cursor: pointer;
+  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18);
+}
+.stick-go:hover { background: var(--crust-deep); }
+.stick-go:disabled { opacity: 0.6; cursor: progress; }
+
+.transport-line {
+  margin: 1.6rem 0 0;
+  color: var(--haze);
+  font-size: 0.95rem;
+}
+.transport-line strong { color: var(--milk); font-weight: 700; }
+
+.recent {
+  justify-self: center;
+  width: min(34rem, 100%);
+}
+.recent h2 {
+  margin: 0 0 0.5rem;
+  font: 600 1.05rem/1.3 var(--font-display);
+  color: var(--haze);
+}
+.recent-list { list-style: none; margin: 0; padding: 0; }
+.recent-list button {
+  display: grid;
+  grid-template-columns: 2.25rem 1fr;
+  gap: 0.15rem 0.8rem;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+  border: 0;
+  border-radius: 14px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.recent-list button:hover { background: var(--shelf); }
+.recent-badge {
+  grid-row: span 2;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 10px;
+  border: 2px solid var(--crust);
+  background: var(--butter);
+  color: var(--on-butter);
+  font: 700 1.05rem/1 var(--font-display);
+  text-transform: uppercase;
+}
+.recent-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.recent-host { color: var(--haze); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.recent-empty { margin: 0; color: var(--haze); font-size: 0.95rem; }
+
+/* ---- browser ------------------------------------------------------------ */
+
+.browser {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  background: var(--shelf);
+  border-bottom: 1px solid var(--line);
+}
+
+.address {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 6px;
+  padding: 0 14px;
+  height: 42px;
+  border: 2px solid transparent;
+  border-radius: 14px;
+  background: var(--pantry);
+}
+.address:focus-within { border-color: var(--crust); }
+.address-lock {
+  flex: none;
+  width: 17px; height: 17px;
+  fill: none; stroke: var(--haze); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+}
+.address-lock[data-insecure] { stroke: var(--danger); }
+.address-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  font-size: 0.98rem;
+}
+.address-input:focus { outline: none; }
+
+.progress {
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: 3px;
+  width: 0;
+  background: linear-gradient(90deg, var(--butter), var(--crust));
+  opacity: 0;
+  transition: width 1.6s cubic-bezier(.1, .7, .2, 1), opacity 0.3s;
+}
+.progress[data-state="loading"] { width: 82%; opacity: 1; }
+.progress[data-state="done"] { width: 100%; opacity: 0; transition: width 0.2s, opacity 0.4s 0.2s; }
+
+.frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+/* ---- settings ----------------------------------------------------------- */
+
+.settings {
+  width: min(30rem, calc(100vw - 32px));
+  padding: 0;
+  border: 2px solid var(--line);
+  border-radius: 22px;
+  background: var(--shelf);
+  color: var(--milk);
+  box-shadow: 0 24px 60px rgb(5 8 30 / 0.45);
+}
+.settings::backdrop { background: rgb(10 13 34 / 0.6); }
+.settings[open] { animation: rise 180ms ease-out; }
+@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
+
+.settings-body { display: grid; gap: 1.2rem; padding: 18px 22px 24px; }
+.settings-head { display: flex; align-items: center; justify-content: space-between; }
+.settings-head h2 { margin: 0; font: 600 1.4rem/1.2 var(--font-display); }
+
+.field { display: grid; gap: 0.4rem; }
+.field label, .field-label { font-weight: 700; }
+.field select {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 2px solid var(--line);
+  border-radius: 12px;
+  background: var(--shelf-high);
+}
+.field select:focus-visible { border-color: var(--crust); outline: none; }
+.hint { margin: 0; color: var(--haze); font-size: 0.9rem; }
+.settings .notice { margin: 0; }
+
+/* ---- small screens ------------------------------------------------------ */
+
+@media (max-width: 560px) {
+  .toolbar { gap: 0; padding: 6px; }
+  .icon-button { width: 36px; height: 36px; }
+  .toolbar [data-action="fullscreen"], .toolbar [data-action="popout"] { display: none; }
+  .address { margin: 0 4px; padding: 0 10px; }
+  .stick { padding-left: 16px; border-radius: 20px; }
+  .stick-go { padding: 0.55rem 1rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}