/* House Of Vello — the studio as a room. Left: the stage, where the figure stands
   behind the work and the skill files run down the wall. Right: the conversation.
   One accent only: --tint is sampled from the study on the page. */
:root{--ink:#343c30;--muted:#7d826f;--faint:#a8ad9f;--line:#dedfd5;--paper:#fbfbf8;--sheet:#fdfdfb;--white:#fff;--tint:113,91,159;--px:0;--py:0;--serif:Palatino,'Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{height:100%}
/* The room's wall (assets/wall.svg): honed pale stone in large blocks, kept faint, under the
   old cracks of stone.svg. The conversation keeps its own plain sheet. */
body{margin:0;min-height:100%;background:var(--paper) url('assets/wall.svg') 0 0/960px 640px;color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0;background:url('assets/stone.svg') center/cover no-repeat;opacity:.42;pointer-events:none;z-index:-1}
button,textarea,code{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
button:focus-visible,textarea:focus-visible{outline:2px solid rgb(var(--tint));outline-offset:5px}
::selection{background:rgba(var(--tint),.18)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* The header is the room's lintel, in the room's own colour: the page's paper and wall (lined
   up with the wall below it) with the statue's marble laid faintly over them, a pair of soft
   mouldings along the lower edge and the House's name incised in Roman capitals. */
header{height:92px;padding:0 3.2%;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:5;background:var(--paper) url('assets/wall.svg') 0 0/960px 640px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(70,74,64,.1),0 10px 20px -18px rgba(40,46,40,.22)}
header:before{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/marble.svg') 0 0/480px;opacity:.3}
header>*{position:relative;z-index:1}
header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 0 3px,rgba(70,74,64,.1) 3px 4px,rgba(255,255,255,.75) 4px 5px,rgba(255,255,255,0) 5px 8px,rgba(70,74,64,.08) 8px 9px,rgba(255,255,255,.6) 9px 10px,rgba(70,74,64,.06) 10px 11px)}
.wordmark{font-family:var(--serif);font-size:23px;letter-spacing:6px;text-transform:uppercase;color:#85887c;text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(52,56,48,.45)}
.wordmark span{font-size:.7em;letter-spacing:4.5px}
header>.social{margin-left:auto;margin-right:10px;width:49px;height:49px;display:flex;align-items:center;justify-content:center;flex:none;border:1px solid #d6d9ce;background:#ffffff60;color:var(--ink);transition:border-color .2s}
header>.social:hover{border-color:#aeb5a6}
header>.social svg{width:17px;height:17px}
header>button{border:1px solid #d6d9ce;padding:13px 17px;font-size:14px;background:#ffffff60;transition:border-color .2s}
header>button:hover{border-color:#aeb5a6}
header>button span{margin-left:18px}
header>button.connected{border-color:transparent;background:none;font-family:var(--mono);font-size:13px;color:var(--muted)}
header>button.connected:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:rgb(var(--tint));margin-right:10px;vertical-align:1px}

/* One row, pinned to the window: a long conversation scrolls inside its own column
   instead of stretching the row and dragging the stage with it. */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,37%);grid-template-rows:minmax(0,1fr);height:calc(100svh - 92px);min-height:680px}

/* The stage. Window light falls from the upper right in the colour of the work. */
.stage{position:relative;overflow:hidden;min-width:0}
.stage:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 85% at 82% 8%,rgba(var(--tint),.085),rgba(var(--tint),0) 70%);pointer-events:none;z-index:1}
h1{margin:0 0 26px;font-weight:400;font-size:14px;letter-spacing:4px;text-transform:uppercase;color:#6d7165;text-shadow:0 1px 0 #fff,0 -1px 0 #40473730;line-height:1}
h1 span{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:clamp(34px,3.1vw,48px);letter-spacing:-.6px;text-transform:none;color:#4e554a;text-shadow:0 1px 0 #fff}

/* The figure: large, translucent, low, standing behind the work and turned toward it. */
.artist{position:absolute;inset:0;pointer-events:none}
.portrait{position:absolute;left:clamp(120px,9vw,190px);bottom:-3%;height:104%;width:46%;display:flex;align-items:flex-end;justify-content:center;transform:translate(calc(var(--px) * -12px),calc(var(--py) * -6px));transition:transform .9s cubic-bezier(.2,.7,.2,1);mix-blend-mode:multiply}
.portrait img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;opacity:.52}

/* The wall of files: a spine down the left edge. */
.skill-list{position:absolute;left:0;top:0;bottom:0;width:clamp(150px,12vw,190px);padding:52px 0 0 3.2%;display:flex;flex-direction:column;gap:17px;pointer-events:auto;z-index:3;}
.skill-list button{font-size:12.5px;color:#6c7463;display:flex;gap:9px;align-items:center;padding:7px 0;white-space:nowrap;letter-spacing:.2px;transition:color .2s,transform .3s}
.skill-list button:hover{color:var(--ink);transform:translateX(3px)}
.skill-list button:hover svg{stroke:rgb(var(--tint))}
.skill-list svg{width:13px;height:17px;stroke:#929b8d;fill:none;stroke-width:1;flex-shrink:0;transition:stroke .2s}
.skill-list [data-status=live] svg{fill:#d9dccf}
.skill-list [data-status=preview] svg{fill:#d9dccf;fill-opacity:.4}
.skill-list [data-status=planned] svg{stroke-dasharray:2 2}
.legend{margin:14px 0 0;font-size:10.5px;color:var(--faint);letter-spacing:.3px;display:flex;gap:10px;align-items:center;white-space:nowrap}
.legend i{display:inline-block;flex:none;width:9px;height:11px;border:1px solid #b2b8aa;margin-right:5px;vertical-align:-1px}
.legend .live{background:#d9dccf}
.legend .preview{background:#eef0e9}
.legend .planned{border-style:dashed}

/* The work, floating in front of the figure, lit from the window. */
.gallery{position:absolute;right:6.5%;top:50%;width:min(56vh,46%);transform:translate(calc(var(--px) * 6px),calc(-50% + var(--py) * 4px));transition:transform .9s cubic-bezier(.2,.7,.2,1);z-index:2}
.conversation h2{font-size:18px;line-height:1.4;font-weight:400;color:#697160;margin:0}
/* The label under the work, as a museum hangs one: a small tablet of the frame's marble,
   paler, below the plinth. What it is in small cut capitals, its name, then its seed in
   full on two lines, selected whole with one click. Its own ground keeps the wall's joints
   and the figure's drapery out from behind the words. */
.placard{position:relative;margin:22px 0 0;padding:13px 16px 13px;background:linear-gradient(rgba(251,251,248,.74),rgba(251,251,248,.74)),url('assets/marble.svg') 0 0/480px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(70,74,64,.14),0 12px 22px -18px rgba(40,46,40,.34),0 1px 2px rgba(40,46,40,.06)}
.placard .kicker{margin:0;font-family:var(--serif);font-size:10.5px;line-height:1.3;letter-spacing:2.6px;text-transform:uppercase;color:#85887c;text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(52,56,48,.28)}
.placard h2{margin:5px 30px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.1px;color:#4e554a;text-shadow:0 1px 0 #fff}
.placard button{position:absolute;top:9px;right:10px;font-size:21px;color:#7c8575;padding:0 3px;line-height:1;transition:color .2s}
.placard button:hover{color:var(--ink)}
/* The frame is cut from the statue's marble like a small temple front: a fluted pilaster
   either side with a plain capital and base, a lintel under a cornice that projects past the
   pilasters, a plinth below, and the work set into the stone. Light falls from the upper
   right, as it does on the stage. */
.art-frame{--frame:clamp(16px,1.9vw,28px);--marble:#efeee9 url('assets/marble.svg') 0 0/480px;--flutes:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0,rgba(255,255,255,.2) 5%,rgba(70,74,64,.03) 11%,rgba(70,74,64,.22) 20%,rgba(255,255,255,.45) 24%,rgba(255,255,255,.75) 25%);--bevel:inset 1px 1px 0 rgba(255,255,255,.9),inset -1px -1px 0 rgba(70,74,64,.24);--lift:0 30px 60px -30px rgba(40,46,40,.42),0 2px 6px -2px rgba(40,46,40,.16);width:100%;aspect-ratio:1;padding:var(--frame);border:0;box-shadow:var(--bevel),var(--lift);transition:box-shadow .4s,transform .4s;background:
  var(--flutes) 0 calc(var(--frame) * 1.4)/var(--frame) calc(100% - 2.8 * var(--frame)) no-repeat,
  var(--flutes) 100% calc(var(--frame) * 1.4)/var(--frame) calc(100% - 2.8 * var(--frame)) no-repeat,
  linear-gradient(180deg,rgba(255,255,255,0) 0 62%,rgba(70,74,64,.2) 62% 76%,rgba(255,255,255,.8) 76% 88%,rgba(255,255,255,0) 88%) 0 var(--frame)/100% calc(var(--frame) * .4) no-repeat,
  linear-gradient(180deg,rgba(255,255,255,0) 0 12%,rgba(255,255,255,.8) 12% 24%,rgba(70,74,64,.2) 24% 38%,rgba(255,255,255,0) 38%) 0 calc(100% - var(--frame))/100% calc(var(--frame) * .4) no-repeat,
  linear-gradient(180deg,rgba(255,255,255,0) 0 48%,rgba(70,74,64,.18) 48% 52%,rgba(255,255,255,.7) 52% 56%,rgba(255,255,255,0) 56% 82%,rgba(70,74,64,.22) 100%) 0 0/100% var(--frame) no-repeat,
  linear-gradient(180deg,rgba(255,255,255,.8) 0 10%,rgba(255,255,255,0) 10% 40%,rgba(70,74,64,.17) 40% 44%,rgba(255,255,255,.65) 44% 48%,rgba(255,255,255,0) 48%) 0 100%/100% var(--frame) no-repeat,
  linear-gradient(215deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%,rgba(60,64,55,.08)),
  var(--marble)}
.art-frame:hover{box-shadow:var(--bevel),0 40px 70px -30px rgba(40,46,40,.45),0 2px 6px -2px rgba(40,46,40,.16);transform:translateY(-2px)}
.art-frame:before,.art-frame:after{content:"";position:absolute;left:calc(var(--frame) * -.3);right:calc(var(--frame) * -.3);z-index:0;pointer-events:none}
.art-frame:before{top:calc(var(--frame) * -.25);height:calc(var(--frame) * .58);background:linear-gradient(180deg,rgba(255,255,255,.95) 0 1px,rgba(255,255,255,.3) 1px 28%,rgba(70,74,64,.12) 28% 34%,rgba(255,255,255,.55) 34% 40%,rgba(255,255,255,0) 40% 78%,rgba(70,74,64,.24) 100%),var(--marble);box-shadow:inset 1px 0 0 rgba(255,255,255,.8),inset -1px 0 0 rgba(70,74,64,.2),0 3px 4px -2px rgba(50,54,46,.35)}
.art-frame:after{bottom:calc(var(--frame) * -.25);height:calc(var(--frame) * .5);background:linear-gradient(180deg,rgba(255,255,255,.95) 0 1px,rgba(255,255,255,.35) 1px 30%,rgba(255,255,255,0) 30% 70%,rgba(70,74,64,.26) 100%),var(--marble);box-shadow:inset 1px 0 0 rgba(255,255,255,.8),inset -1px 0 0 rgba(70,74,64,.2),0 6px 10px -6px rgba(40,46,40,.4)}
.art-frame .sheet{z-index:1}
.art-frame .sheet:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 2px 5px rgba(50,54,46,.3),inset 0 0 0 1px rgba(70,74,64,.2)}
/* Until a payment is confirmed the frame shows the House display (display.js, app.js):
   works that are never sold. Then the visitor's work is made here and the frame keeps its still. */
.art-frame{position:relative}
.art-frame.waiting,.art-frame.making{cursor:default}
.art-frame.waiting:hover,.art-frame.making:hover{transform:none;box-shadow:var(--bevel),var(--lift)}
.sheet{position:relative}
.sheet[hidden],.sheet img[hidden]{display:none}
.sheet img{display:block;width:100%;height:auto}
.sheet .grain{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
.works{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.works[hidden]{display:none}
.works button{min-width:28px;height:28px;border:1px solid var(--line);border-radius:999px;font:12px/1 var(--mono);color:var(--muted);transition:border-color .2s,color .2s}
.works button:hover,.works button[aria-pressed=true]{border-color:rgba(var(--tint),.6);color:var(--ink)}
.art-caption{font-style:italic;font-size:15px;color:var(--muted);margin:14px 0 0}
.seed{margin:11px 0 0;padding-top:10px;border-top:1px solid rgba(70,74,64,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);display:flex;gap:14px;align-items:baseline;min-width:0}
.seed span{font-family:var(--serif);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}
.seed code{font-family:var(--mono);font-size:10px;line-height:1.65;letter-spacing:.06em;color:#8b9083;width:calc(32ch + 32 * .06em + 2px);word-break:break-all;-webkit-user-select:all;user-select:all;transition:color .2s}
.seed code.pending{width:auto;word-break:normal;-webkit-user-select:auto;user-select:auto;font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:0;color:var(--faint)}
.seed:hover code{color:var(--muted)}

/* The conversation: its own sheet of paper. */
.conversation{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--sheet);border-left:1px solid var(--line);padding:40px 3.2% 28px clamp(28px,3vw,48px);box-shadow:-30px 0 60px -50px rgba(40,46,40,.25)}
.conversation h2{padding-bottom:22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
#presence{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c9cdc1;transition:background .4s}
#presence.in{background:rgb(var(--tint))}
#presence.thinking{background:rgb(var(--tint));animation:breathe 1.6s ease-in-out infinite}
#presence.closed{background:#b4b8ad}
.messages{flex:1;min-height:130px;overflow-y:auto;scrollbar-width:thin;padding:32px 6px 18px 0;display:flex;flex-direction:column}
.messages:empty{justify-content:center}
.messages:empty:before{content:"Nothing happens here until you say something.";font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:#b3b8ab;max-width:22ch;letter-spacing:-.2px}
.messages p{font-family:var(--serif);font-size:clamp(21px,1.6vw,26px);line-height:1.5;letter-spacing:-.3px;margin:0 0 26px;animation:arrive .45s both;overflow-wrap:anywhere}
.messages p.user{text-align:right;color:#818875;font-size:17px;font-style:italic;padding-left:20px;letter-spacing:0}
.messages p.followup{font-size:22px}

/* The deal slip: the only place a figure is shown, from verified data. */
.deal{margin:6px 0 20px;padding:16px 18px 14px 20px;border-left:2px solid rgb(var(--tint));background:#ffffff8c;position:relative}
.deal[hidden]{display:none}
.deal p{margin:0 0 12px;font-size:15px;line-height:1.5;color:#5f6757}
.deal p.figure{font-family:var(--serif);font-size:24px;letter-spacing:-.3px;color:var(--ink);margin-bottom:6px}
.deal p.address{font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--ink);word-break:break-all;user-select:all}
.deal p.fine{font-size:12.5px;color:var(--faint);margin-bottom:0}
.deal p.note{font-size:13.5px;font-style:italic;color:var(--ink);margin:10px 0 0}
.deal p.verdict{font-family:var(--serif);font-style:italic;font-size:36px;line-height:1.1;letter-spacing:-.8px;color:var(--ink);margin:2px 0 10px;transform-origin:left center;animation:stamp .55s cubic-bezier(.2,.9,.25,1.15) both}
.deal p.verdict.no{color:#8b4a3c}
.deal button{border:1px solid #bec5b5;font-size:14px;padding:10px 15px;background:#ffffffa0;transition:border-color .2s,background .2s}
.deal button:hover{border-color:#8a9381}
.deal button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.deal button+button{margin-left:10px}
.deal .expiry{position:absolute;left:-2px;bottom:0;width:2px;height:100%;background:rgba(var(--tint),.25);transform-origin:bottom;animation:drain linear forwards}
#chatStatus{font-size:13px;color:var(--faint);min-height:20px;margin-bottom:8px;display:block;font-style:italic}
form{position:relative;min-height:126px;border:1px solid #b9c1ae;background:#ffffffa8;padding:17px 44px 18px 16px;flex-shrink:0;transition:border-color .2s,box-shadow .2s}
textarea{border:0;width:100%;min-height:75px;resize:none;padding:0;border-radius:0;background:none;font-size:16px;line-height:1.5}
textarea::placeholder{font-style:italic;color:#89937f}
textarea:focus{outline:none}
textarea:disabled{color:var(--faint)}
form:focus-within{border-color:rgb(var(--tint));box-shadow:0 0 0 1px rgba(var(--tint),.6)}
form>button{position:absolute;right:12px;bottom:12px;width:31px;height:31px;background:#394530;color:#fff;font-size:22px;transition:background .2s}
form>button:disabled{background:#c3c8bc;cursor:default}

/* A skill file opens as a sheet pulled from the wall of files. */
dialog{position:fixed;inset:0 auto 0 0;margin:0;height:100%;max-height:none;max-width:580px;width:min(580px,calc(100% - 36px));padding:64px 56px 56px 60px;border:0;border-right:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:40px 0 100px -40px rgba(28,37,28,.18);overflow:auto;scrollbar-width:thin}
dialog::backdrop{background:#fbfbf8c8;backdrop-filter:blur(6px)}
dialog[open]{animation:sheet .38s cubic-bezier(.2,.7,.2,1) both}
.close{position:absolute;top:16px;right:20px;font-size:28px;color:var(--muted)}
dialog h2{font-size:28px;font-weight:400;margin:0 0 8px;letter-spacing:.2px}
dialog .skill-status{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
dialog p{font-family:var(--serif);font-size:17.5px;line-height:1.65;color:#4c5346;margin:0 0 18px;max-width:60ch}
dialog p a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--tint),.6);text-underline-offset:3px}
dialog.art-dialog{inset:0;margin:auto;height:fit-content;width:min(820px,calc(100% - 36px));max-height:calc(100% - 36px);padding:64px 30px 30px;border:1px solid var(--line);box-shadow:0 25px 100px #1c251c12}
dialog.art-dialog[open]{animation:fade .3s ease-out both}
dialog img{width:100%;display:block}

@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
@keyframes drain{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes sheet{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes stamp{from{opacity:0;transform:scale(1.4) rotate(-3deg);filter:blur(3px)}60%{opacity:1;filter:none}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.messages p,dialog[open],.deal p.verdict{animation:none}#presence.thinking{animation:none;opacity:.6}.portrait,.gallery{transition:none}}

@media(min-width:1800px){.gallery{width:min(58vh,44%);right:8%}.skill-list button{font-size:14px}}
@media(max-width:1250px){.workspace{grid-template-columns:minmax(0,1fr) minmax(360px,40%)}h1{font-size:12px;letter-spacing:3px;margin-bottom:18px}h1 span{font-size:clamp(26px,2.8vw,34px);margin-top:8px}.skill-list{width:clamp(130px,12vw,160px);padding-top:40px;gap:13px}.skill-list button{font-size:11px;gap:7px}.legend{display:none}.portrait{left:clamp(90px,8vw,140px);width:50%}.gallery{width:min(50vh,50%);right:5%}.messages p{font-size:21px}.messages p.followup{font-size:20px}}
/* Phones and portrait tablets: an app, not a long page. A compact strip holds the
   chapter, a small frame and the files; the conversation fills the rest of the
   screen with the message box always in view. */
@media(max-width:900px),(orientation:portrait) and (max-width:1100px){
body{display:flex;flex-direction:column;height:100svh;height:100dvh;overflow:hidden}
body:before{opacity:.3}
header{flex:none;height:auto;padding:12px 16px;gap:12px}
.wordmark{font-size:15px;letter-spacing:3px;white-space:nowrap}
.wordmark span{font-size:.72em;letter-spacing:2.5px}
header>button{font-size:12.5px;padding:8px 11px;white-space:nowrap}
header>.social{margin-right:0;width:37px;height:37px}
header>.social svg{width:15px;height:15px}
header>button span{margin-left:8px}
.workspace{flex:1;min-height:0;height:auto;display:flex;flex-direction:column}
.stage{flex:none;overflow:hidden;padding:14px 16px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.gallery{order:1;position:relative;z-index:2;right:auto;top:auto;width:auto;transform:none;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;align-items:center}
.art-frame{grid-column:1;grid-row:1/3;--frame:7px;--lift:0 12px 24px -16px rgba(40,46,40,.38)}
.works{grid-column:2;grid-row:3;margin:6px 0 0}
.works button{min-width:24px;height:24px;font-size:11px}
h1{grid-column:2;grid-row:1;margin:0;font-size:10.5px;letter-spacing:2.5px;align-self:end}
h1 span{font-size:24px;margin-top:5px;letter-spacing:-.3px}
.placard{grid-column:2;grid-row:2;margin:5px 0 0;padding:0;align-self:start;background:none;box-shadow:none}
.placard .kicker{font-size:9px;letter-spacing:1.8px}
.placard h2{margin:2px 26px 0 0;font-size:15px}
.placard button{top:-2px;right:0;font-size:19px}
.seed{display:none}
.artist{order:2;position:static;pointer-events:auto}
.portrait{position:absolute;left:auto;right:3%;top:0;bottom:0;height:100%;width:28%;transform:none;z-index:0;pointer-events:none}
.portrait img{opacity:.2}
.skill-list{position:relative;z-index:2;width:auto;padding:0;margin-top:12px;background:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}
.skill-list button{font-size:11.5px;gap:6px;padding:5px 0;min-width:0}
.skill-list svg{width:10px;height:13px}
.skill-list button:hover{transform:none}
.legend{display:none}
.conversation{flex:1;min-height:0;border-left:0;box-shadow:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.conversation h2{font-size:14px;padding-bottom:10px}
.messages{min-height:0;padding:16px 4px 8px 0}
.messages p{font-size:19px;margin-bottom:18px}
.messages p.user{font-size:15px}
.messages p.followup{font-size:18px}
.messages:empty:before{font-size:17px}
.deal{margin:4px 0 10px;padding:12px 14px 10px 16px}
.deal p{font-size:14px;margin-bottom:8px}
.deal p.figure{font-size:20px}.deal p.verdict{font-size:30px}
#chatStatus{font-size:12px;min-height:16px;margin-bottom:4px}
form{min-height:0;padding:10px 46px 10px 12px}
textarea{min-height:44px;font-size:16px}
form>button{right:9px;bottom:9px}
dialog{width:100%;max-width:none;border-right:0;padding:56px 7% 48px}
}
/* Tablets in portrait have room for all six files in one row and larger text. */
@media(min-width:640px) and (orientation:portrait) and (max-width:1100px){
header{padding:16px 24px}
.wordmark{font-size:19px}
.stage{padding:18px 24px 16px}
.gallery{grid-template-columns:104px minmax(0,1fr);column-gap:20px}
h1 span{font-size:30px}
.skill-list{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:16px}
.conversation{padding:16px max(24px,calc((100% - 760px) / 2)) calc(16px + env(safe-area-inset-bottom))}
.messages p{font-size:22px}
.messages p.user{font-size:16px}
}
.conversation .privacy{font-size:11px;color:var(--faint);margin:6px 0 0;font-style:italic}
dialog ul{font-family:var(--serif);font-size:17.5px;line-height:1.65;color:#4c5346;margin:-10px 0 18px;padding-left:1.1em;max-width:60ch}
dialog li{margin:0 0 6px}
@media(max-width:360px){header{gap:8px;padding:12px}.wordmark{letter-spacing:2px}header>button{padding:8px 9px}header>button span{display:none}header>.social{width:34px;height:34px}}