/* 苔藓时间 Moss Time · 侘寂自然风 —— 留白 / 枯山水 / 苔藓色 / 呼吸感 */
:root{
  --paper:#fafafa;
  --ink:#1c1c1c;
  --dim:#9a968c;
  --moss:#6b8e6b;
  --moss-soft:rgba(107,142,107,.12);
  --stone:#8b7355;
  --warn:#a8894f;
  --danger:#a85c5c;
  --edge:rgba(28,28,28,.1);
  --card:#ffffff;
  --font:"Inter","Noto Sans SC","PingFang SC","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:12px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#bg-layer{
  position:fixed;inset:0;z-index:0;
  background:radial-gradient(ellipse at 50% 42%,#f3f1ec 0%,var(--paper) 65%);
  transition:filter 2s ease;
}
body.epoch-2 #bg-layer{filter:hue-rotate(10deg)}
body.epoch-3 #bg-layer{filter:sepia(.12) hue-rotate(-15deg)}
body.epoch-4 #bg-layer{filter:sepia(.2) hue-rotate(20deg)}
body.epoch-5 #bg-layer{filter:hue-rotate(-30deg) brightness(1.01)}

#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh}

/* 顶栏：几乎隐形，悬停浮现 */
#topbar,#bottombar,.panel{
  opacity:.1;transition:opacity .5s ease;
}
#topbar:hover,#bottombar:hover,.panel:hover{opacity:1}

#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px 0;
}
.brand .title{font-size:14px;font-weight:500;letter-spacing:4px;color:var(--ink);margin-right:12px}
.brand .subtitle{color:var(--dim);font-size:10px;letter-spacing:2px}
.epoch-info{display:flex;gap:8px;align-items:center}
#epoch-badge{
  color:var(--moss);border:1px solid rgba(107,142,107,.4);
  padding:3px 12px;border-radius:999px;font-size:11px;letter-spacing:1px;
}
#trait-badges span{
  color:var(--stone);border:1px solid rgba(139,115,85,.35);
  padding:3px 10px;border-radius:999px;font-size:10px;margin-left:6px;
}
.top-actions{display:flex;gap:8px}

/* 主体：视野绝对居中，四周大量留白 */
#main{flex:1;display:flex;min-height:0;align-items:center;justify-content:center;position:relative}
.panel{
  position:absolute;top:50%;transform:translateY(-50%);
  width:210px;max-height:78vh;padding:18px;
  background:transparent;border:none;overflow-y:auto;
  scrollbar-width:none;
}
.panel::-webkit-scrollbar{display:none}
#panel-left{left:26px}
#panel-right{right:26px}
.panel-title{
  color:var(--dim);font-size:10px;letter-spacing:3px;
  margin-bottom:10px;font-weight:400;
}

/* 滑块：极简细线，拖动时颜色渐变反馈 */
.slider-block{margin-bottom:16px}
.slider-head{display:flex;justify-content:space-between;margin-bottom:6px;font-size:11px}
.slider-head span:first-child{color:var(--dim);letter-spacing:1px}
.slider-head .val{color:var(--ink);font-family:var(--mono);font-size:11px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:1px;
  background:rgba(28,28,28,.15);outline:none;cursor:ew-resize;
  transition:background .3s;
}
input[type=range]:hover{background:var(--moss)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);
  transition:border-color .3s,transform .2s;
}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb{border-color:var(--moss);transform:scale(1.2)}
input[type=range]::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);
}
.ticks{display:flex;justify-content:space-between;color:rgba(28,28,28,.25);font-size:9px;margin-top:4px;font-family:var(--mono)}

/* 读数 */
#readout{padding:0}
.ro-row{
  display:flex;justify-content:space-between;padding:6px 0;font-size:11px;
  border-bottom:.5px solid var(--edge);
}
.ro-row:last-child{border-bottom:none}
.ro-row span:first-child{color:var(--dim)}
.ro-row span:last-child{color:var(--ink);font-family:var(--mono)}

/* 显微镜视野：留白中的"月" */
#scope-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
#scope-frame{
  position:relative;border-radius:50%;padding:0;
  background:transparent;border:none;
  box-shadow:0 30px 80px rgba(28,28,28,.18);
}
#scope{display:block;border-radius:50%;background:#1a140f}
#scope-glass{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 32% 28%,rgba(255,255,255,.03) 0%,transparent 38%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.4);
}
#lens{
  position:absolute;width:200px;height:200px;border-radius:50%;
  border:1.5px solid var(--moss);pointer-events:none;z-index:5;
  box-shadow:0 12px 40px rgba(28,28,28,.25);
  background:#000;transform:translate(-50%,-50%);
}
#scope-label{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  color:var(--dim);font-size:9px;letter-spacing:4px;white-space:nowrap;
  font-family:var(--mono);
}

/* 基质列表：极简文字行 */
.sub-item{
  padding:7px 2px;margin-bottom:2px;border-radius:0;
  background:transparent;border:none;border-bottom:.5px solid var(--edge);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  transition:all .25s ease;font-size:12px;color:var(--ink);
}
.sub-item:hover{padding-left:8px;color:var(--moss)}
.sub-item.active{color:var(--moss);border-bottom-color:var(--moss)}
.sub-item.locked{color:rgba(28,28,28,.2);cursor:not-allowed}
.sub-item.locked:hover{padding-left:2px;color:rgba(28,28,28,.2)}
.sub-item .sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:8px;vertical-align:-1px}

/* 按钮：幽灵细线 */
.tbtn{
  background:transparent;border:1px solid rgba(28,28,28,.2);color:var(--ink);
  font-family:var(--font);font-size:11px;font-weight:400;letter-spacing:1px;
  padding:5px 13px;border-radius:999px;cursor:pointer;
  transition:all .25s ease;
}
.tbtn:hover{border-color:var(--moss);color:var(--moss)}
.tbtn.danger:hover{border-color:var(--danger);color:var(--danger)}
.big-btn{
  width:100%;padding:10px;border-radius:999px;
  background:transparent;border:1px solid rgba(107,142,107,.5);
  color:var(--moss);font-family:var(--font);font-size:12px;font-weight:400;
  cursor:pointer;letter-spacing:2px;transition:all .25s ease;
}
.big-btn:hover{background:var(--moss-soft)}
#btn-extinct{
  margin-top:14px;border-color:rgba(168,137,79,.5);color:var(--warn);
}
#btn-extinct:hover{background:rgba(168,137,79,.08)}
.save-row{display:flex;gap:6px}
.save-row .tbtn{flex:1;padding:5px 0}

/* 操作按钮：文字行 */
#ops-list{display:flex;flex-direction:column}
.op-btn{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 2px;border-radius:0;
  background:transparent;border:none;border-bottom:.5px solid var(--edge);
  color:var(--ink);font-family:var(--font);font-size:12px;cursor:pointer;
  transition:all .25s ease;
}
.op-btn:hover:not(:disabled){padding-left:8px;color:var(--moss)}
.op-btn:disabled{opacity:.35;cursor:not-allowed}
.op-btn .cd{color:var(--stone);font-size:10px;font-family:var(--mono)}

/* 识别器信息卡：白卡片 */
#id-card{
  position:absolute;z-index:20;width:240px;pointer-events:auto;
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r);
  padding:14px 16px;font-size:11px;line-height:1.9;
  box-shadow:0 16px 48px rgba(28,28,28,.15);
  animation:card-in .25s ease;
}
@keyframes card-in{from{opacity:0;transform:translateY(6px)}}
#id-card h4{color:var(--moss);letter-spacing:1px;margin-bottom:6px;font-size:13px;font-weight:500}
#id-card .row{display:flex;justify-content:space-between;color:var(--dim)}
#id-card .row span:last-child{color:var(--ink);font-family:var(--mono)}
#id-card .hp{height:3px;border-radius:1.5px;background:rgba(28,28,28,.08);margin-top:8px;overflow:hidden}
#id-card .hp i{display:block;height:100%;border-radius:1.5px;background:var(--moss)}
#id-card .card-btns{display:flex;gap:8px;margin-top:10px}
#id-card .card-btns button{flex:1;font-size:10px;padding:4px 0}
#scope-wrap.ident-mode #scope{cursor:crosshair}

/* 底栏 */
#bottombar{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 26px 14px;color:var(--dim);font-size:10px;letter-spacing:1px;
}
#status-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:85%}
.ver{font-family:var(--mono)}

/* 弹窗：白纸卡片 */
.modal{
  position:fixed;inset:0;z-index:50;background:rgba(250,250,250,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  animation:fade-in .25s ease;
}
@keyframes fade-in{from{opacity:0}}
.modal-box{
  width:min(600px,92vw);max-height:82vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:0 24px 80px rgba(28,28,28,.12);
  animation:sheet-in .3s ease;
}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px)}}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:.5px solid var(--edge);
  font-weight:500;letter-spacing:2px;font-size:13px;
}
.modal-close{
  background:transparent;border:none;color:var(--dim);
  width:26px;height:26px;border-radius:50%;font-size:15px;cursor:pointer;
  transition:all .2s ease;line-height:1;
}
.modal-close:hover{color:var(--danger)}
.help-body{padding:20px 22px;line-height:2}
.help-body p{margin-bottom:10px}

/* 图鉴工具栏 */
#codex-tools{
  display:flex;gap:10px;align-items:center;padding:14px 22px;
  border-bottom:.5px solid var(--edge);
}
#codex-search{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--edge);
  color:var(--ink);font-family:var(--font);font-size:12px;
  padding:6px 2px;outline:none;transition:border-color .3s;
}
#codex-search:focus{border-bottom-color:var(--moss)}
#codex-filter-label{color:var(--dim);font-size:11px;white-space:nowrap;cursor:pointer}
#codex-filter{accent-color:var(--moss)}

/* 图鉴条目：正面剪影感，文字悬停浮现 */
#codex-list{padding:16px 22px}
.codex-entry{
  border-radius:var(--r);margin-bottom:10px;padding:14px 16px;
  background:var(--paper);border:1px solid var(--edge);
  transition:all .3s ease;
}
.codex-entry:hover{box-shadow:0 10px 30px rgba(28,28,28,.08)}
.codex-entry.locked{color:rgba(28,28,28,.25)}
.codex-entry h4{color:var(--moss);font-size:13px;font-weight:500;letter-spacing:2px;margin-bottom:6px}
.codex-entry.locked h4{color:rgba(28,28,28,.25)}
.codex-entry .sci{font-size:11px;line-height:1.9;margin-bottom:6px;color:var(--ink)}
.codex-entry .poem{color:var(--stone);font-size:11px;line-height:1.9;font-style:italic}
.codex-entry .req{color:var(--dim);font-size:10px;margin-top:8px;font-family:var(--mono)}

/* 大灭绝选项 */
#extinct-options{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.ext-opt{
  border-radius:var(--r);padding:14px 18px;cursor:pointer;
  background:var(--paper);border:1px solid var(--edge);
  transition:all .25s ease;
}
.ext-opt:hover{border-color:rgba(168,137,79,.5);transform:translateX(4px)}
.ext-opt h4{color:var(--warn);margin-bottom:5px;font-weight:500;letter-spacing:1px}
.ext-opt p{color:var(--dim);font-size:11px;line-height:1.8}

/* 离线报告 */
#offline-report{padding:20px 22px;line-height:2}
#offline-report .rep-item{
  margin-bottom:10px;padding:12px 16px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--edge);
  border-left:2px solid var(--moss);
}
#offline-report .rep-item.bad{border-left-color:var(--danger)}
#offline-report .rep-item.good{border-left-color:var(--stone)}

/* toast：极淡胶囊 */
#toast-area{position:absolute;top:20px;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;z-index:30}
.toast{
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(107,142,107,.4);color:var(--ink);
  padding:8px 20px;border-radius:999px;font-size:11px;letter-spacing:1px;
  box-shadow:0 8px 28px rgba(28,28,28,.12);
  animation:toast-in .35s ease;
}
.toast.warn{border-color:rgba(168,137,79,.45)}
.toast.bad{border-color:rgba(168,92,92,.45)}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}}

#io-box{
  position:fixed;left:50%;bottom:60px;transform:translateX(-50%);
  width:min(560px,90vw);height:110px;z-index:60;
  background:var(--card);border:1px solid rgba(107,142,107,.4);border-radius:var(--r);
  color:var(--ink);font-family:var(--mono);font-size:11px;padding:12px;
  box-shadow:0 16px 48px rgba(28,28,28,.15);
}

/* 接种孢子列表：侘寂卡片 */
#inoculate-list{
  padding:16px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-height:56vh;overflow-y:auto;scrollbar-width:thin;
}
#inoculate-list::-webkit-scrollbar{width:4px}
#inoculate-list::-webkit-scrollbar-thumb{background:rgba(28,28,28,.15);border-radius:2px}
.ino-item{
  border:1px solid var(--edge);border-radius:var(--r);padding:10px 12px;
  cursor:pointer;font-size:11px;letter-spacing:1px;color:var(--ink);
  display:flex;align-items:center;gap:8px;background:var(--paper);
  transition:all .25s ease;
}
.ino-item:hover{border-color:rgba(107,142,107,.5);color:var(--moss);transform:translateY(-2px)}
.ino-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* 接种选址模式 */
#scope-wrap.plant-mode #scope{cursor:crosshair}
#scope-wrap.plant-mode #scope-frame{animation:plant-breathe 2s infinite}
@keyframes plant-breathe{50%{box-shadow:0 30px 80px rgba(107,142,107,.35)}}

/* 背景诗句层：淡入漂移淡出 */
#poem-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.poem-line{
  position:absolute;opacity:0;white-space:nowrap;
  color:rgba(28,28,28,.16);
  font-size:13px;letter-spacing:3px;line-height:2;
  transition:opacity 4s ease;
  animation:poem-drift 21s linear;
}
.poem-line.on{opacity:1}
.poem-line.off{opacity:0}
.poem-line .poem-author{
  font-size:11px;color:rgba(139,115,85,.3);
  letter-spacing:2px;margin-left:12px;
}
@keyframes poem-drift{
  from{transform:translateY(10px)}
  to{transform:translateY(-14px)}
}

.hidden{display:none!important}

@media (max-width:900px){
  .panel{width:170px}
  #panel-left{left:12px} #panel-right{right:12px}
  #scope{width:min(66vw,56vh)!important;height:min(66vw,56vh)!important}
}

/* ============ v3 · 高端化打磨 ============ */

/* 全局文字渲染与选区 */
::selection{background:rgba(107,142,107,.2)}
body{letter-spacing:.2px}

/* 面板悬停时浮现一层极薄的磨砂底色 */
.panel{
  border-radius:var(--r);
  transition:opacity .5s ease,background .5s ease,box-shadow .5s ease;
}
.panel:hover{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(28,28,28,.07);
}

/* 顶栏 / 底栏同样微磨砂 */
#topbar,#bottombar{transition:opacity .5s ease}
#topbar:hover,#bottombar:hover{
  background:linear-gradient(rgba(250,250,250,.65),transparent);
}

/* 按钮微交互：悬停字距展开 */
.tbtn:hover,.big-btn:hover{letter-spacing:3px}
.tbtn:active,.big-btn:active{transform:scale(.97)}
button:focus-visible,input:focus-visible{outline:1px solid rgba(107,142,107,.6);outline-offset:2px}

/* 滑块 thumb 投影，更有质感 */
input[type=range]::-webkit-slider-thumb{
  box-shadow:0 2px 8px rgba(28,28,28,.25);
}

/* 视野：加一圈极细的苔绿呼吸光环 */
#scope-frame::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(107,142,107,.18);pointer-events:none;
  animation:scope-breathe 7s ease-in-out infinite;
}
@keyframes scope-breathe{
  50%{border-color:rgba(107,142,107,.4);transform:scale(1.008)}
}

/* 成就 toast：苔金配色 + 光晕 */
.toast.ach{
  border-color:rgba(139,115,85,.55);
  color:var(--stone);
  box-shadow:0 8px 32px rgba(139,115,85,.25);
  animation:toast-in .35s ease,ach-glow 2.4s ease;
}
@keyframes ach-glow{
  0%{box-shadow:0 0 0 0 rgba(139,115,85,.45)}
  60%{box-shadow:0 0 0 14px rgba(139,115,85,0)}
}

/* 成就面板 */
#ach-list{
  padding:16px 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-height:60vh;overflow-y:auto;scrollbar-width:thin;
}
#ach-list::-webkit-scrollbar{width:4px}
#ach-list::-webkit-scrollbar-thumb{background:rgba(28,28,28,.15);border-radius:2px}
.ach-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--edge);background:var(--paper);
  opacity:.45;transition:all .3s ease;
}
.ach-item.unlocked{opacity:1;border-color:rgba(139,115,85,.35)}
.ach-item.unlocked:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,28,28,.08)}
.ach-item h4{font-size:12px;font-weight:500;letter-spacing:1px;color:var(--ink)}
.ach-item.unlocked h4{color:var(--stone)}
.ach-item p{font-size:10.5px;color:var(--dim);line-height:1.7;margin-top:3px}
.ach-medal{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge);color:var(--dim);font-size:12px;
}
.ach-item.unlocked .ach-medal{
  border-color:rgba(139,115,85,.5);color:var(--stone);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(139,115,85,.12));
}

/* 新手引导层 */
#guide-overlay{
  position:fixed;inset:0;z-index:80;
  animation:fade-in .4s ease;
}
#guide-spot{
  position:fixed;display:none;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(28,24,18,.42);
  border:1.5px solid rgba(107,142,107,.7);
  transition:all .45s cubic-bezier(.4,0,.2,1);
  animation:spot-pulse 2.4s ease-in-out infinite;
}
@keyframes spot-pulse{50%{border-color:rgba(107,142,107,.35)}}
#guide-card{
  position:fixed;width:320px;z-index:81;
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r);
  padding:20px 22px;box-shadow:0 24px 70px rgba(28,28,28,.22);
  animation:sheet-in .35s ease;
  transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1);
}
#guide-step-no{
  color:var(--dim);font-size:10px;letter-spacing:3px;font-family:var(--mono);
  margin-bottom:8px;
}
#guide-card h3{font-size:14px;font-weight:500;letter-spacing:2px;color:var(--moss);margin-bottom:8px}
#guide-card p{font-size:12px;line-height:1.9;color:var(--ink)}
#guide-btns{display:flex;gap:10px;margin-top:16px;align-items:center}
#guide-btns .big-btn{width:auto;padding:8px 22px}
#guide-btns .tbtn{border:none;color:var(--dim)}
#guide-btns .tbtn:hover{color:var(--danger)}
/* 引导期间：被介绍的 UI 提到激活态（面板平时 opacity:.1  hover 才亮起） */
.guide-focus{
  opacity:1!important;
  background:var(--card);border-radius:12px;
  box-shadow:0 10px 34px rgba(28,24,18,.10);
}
.guide-focus-up{opacity:1!important}

/* ---- v3.3：拍照与观展 ---- */
#scope{transition:width .9s cubic-bezier(.22,.8,.3,1),height .9s cubic-bezier(.22,.8,.3,1)}
body.gallery #topbar,body.gallery #bottombar,body.gallery .panel{opacity:0!important;pointer-events:none}
body.gallery .modal{display:none!important}
body.gallery #scope-label{opacity:0}
body.gallery #lens{display:none}
body.gallery #toast-area{display:none}
body.gallery #scope-frame{box-shadow:0 40px 110px rgba(28,28,28,.22)}
#gallery-hint{
  position:fixed;bottom:7%;left:50%;transform:translateX(-50%);
  color:var(--dim);font-size:11px;letter-spacing:5px;font-family:var(--mono);
  pointer-events:none;z-index:60;
  animation:gallery-hint-fade 3s ease forwards;
}
@keyframes gallery-hint-fade{0%{opacity:0}15%{opacity:.85}70%{opacity:.85}100%{opacity:0}}

/* ---- v3.4：委托 / 事件 / 新工具 ---- */
#quest-list{display:flex;flex-direction:column;gap:6px}
.quest-item{
  display:flex;flex-direction:column;gap:2px;
  padding:7px 10px;border:1px solid var(--line);border-radius:4px;
  background:rgba(255,255,255,.5);
}
.quest-item .q-text{font-size:11px;line-height:1.6;color:var(--ink)}
.quest-item .q-prog{font-size:9px;letter-spacing:1px;color:var(--dim);font-family:var(--mono)}
.quest-item.q-done{opacity:.55}
.quest-item.q-done .q-text{text-decoration:line-through}
.quest-item.q-done .q-prog{color:var(--moss)}
#quest-hint{
  margin-top:8px;padding:8px 10px;font-size:10px;line-height:1.7;
  color:#6b6250;background:rgba(216,196,140,.14);
  border-left:2px solid rgba(180,150,80,.5);border-radius:0 4px 4px 0;
}
.toast.event{
  background:rgba(42,52,58,.92);color:#dfe8ea;
  border:1px solid rgba(140,170,180,.4);
}
.toast.hint{
  background:rgba(250,246,232,.97);color:#5a5240;
  border:1px solid rgba(180,150,80,.45);
  max-width:320px;line-height:1.7;
}